Pixmora

Иконка загрузки для ожидания

Спиннеры Lucide показывают, что ответ ещё не пришёл. Они не рисуют процент: для прогресса нужен отдельный индикатор в интерфейсе.

Как применить иконку «Дуга круга»

Сценарий страницы: Ожидание ответа без процента выполнения. Основной вариант - lucide:loader-circle, набор Lucide, автор Lucide Contributors, лицензия ISC.

Дуга круга (loader-circle): Неполная окружность: компактный спиннер. Кнопка после submit, подгрузка блока, ожидание API.

Лучи (loader): Восемь коротких штрихов вокруг центра. Нужен более «механический» вид ожидания на светлом фоне.

Шпиль (loader-pinwheel): Изогнутые лопасти, декоративнее простой дуги. Брендовый сплэш ожидания, где уместна мягкая форма.

В кнопке и строке статуса 16–24 px. На экране ожидания целиком 32–48. Не заменяйте спиннером реальный progressbar, если процент известен.

Это пример разметки без анимации и без JS. Вращение подключите CSS transform в своём проекте. Для объявления изменений обновляйте текст уже существующего role="status". Если область результатов помечена aria-busy="true", по окончании обновления снимите busy. Статус ожидания держите вне занятой области, чтобы его объявление не откладывалось. Путь к SVG замените.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Загрузка. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<p role="status">
  <img src="lucide-loader-circle.svg" width="24" height="24" alt="">
  <span>Отправляем данные…</span>
</p>

Частые вопросы

Чем loader-circle отличается от upload?

upload - действие «отправить файл». loader-circle - состояние «ждём ответ», в том числе после upload.

Как сделать доступным спиннер без текста?

Лучше оставить видимый текст. При нехватке места оставьте текст статуса визуально скрытым внутри заранее созданного role="status" или live-region и обновляйте его при изменении состояния. Одна aria-label не обеспечивает объявление обновлений. aria-busy относится к обновляемой области и снимается после завершения.