Генератор CSS для индикатора загрузки

Что вы получаете

Генератор создает два правила: класс .loader и блок @keyframes spin. Класс рисует окружность, задает ей светло-серое кольцо и окрашивает верхний край этого кольца. Keyframes поворачивают окружность на один полный оборот, а строка animation повторяет это бесконечно. Ничего больше не нужно: ни файла изображения, ни иконочного шрифта, ни скрипта.

При значениях по умолчанию (60 px, кольцо 6 px, #10b981, 1 секунда) результат выглядит так:

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Добавьте на свою страницу

Вставьте CSS в таблицу стилей, а затем добавьте один пустой элемент там, где должен появляться индикатор:

<div class="loader" role="status" aria-label="Загрузка"></div>

Показывайте элемент, пока выполняется работа, и удаляйте его или скрывайте через display: none, когда контент появится. Атрибуты role и aria-label позволяют программам чтения с экрана сообщать о состоянии.

Размеры, которые работают

Ориентир: толщина около одной десятой диаметра. Гораздо более тонкое кольцо выглядит блекло на экранах высокой четкости, а слишком толстое превращается в пятно.

Что нужно знать

• Цвет трека фиксирован, светло-серый (#eee). На темном фоне измените это значение в скопированном CSS.
• Инструмент создает один круглый спиннер. Точки, полосы и другие формы требуют другой разметки.
• Если в проекте уже есть класс loader или анимация spin, переименуйте их в скопированном CSS, чтобы правила не конфликтовали.

Показ и скрытие

Индикатор загрузки должен появляться, когда работа начинается, и исчезать, когда она заканчивается. Простой вариант: держать на элементе атрибут hidden и убирать его при старте запроса. Если ожидание обычно очень короткое, добавьте задержку в несколько сотен миллисекунд перед показом кольца, чтобы быстрые ответы не мигали индикатором. Что бы вы ни выбрали, при ошибке тоже скрывайте индикатор, иначе посетитель будет ждать того, что уже завершилось неудачей.