Генератор простого CSS-спиннера

Почему этот спиннер простой

Многие индикаторы загрузки используют несколько вложенных элементов, фоновые изображения или скрипты. Этот представляет собой один div, оформленный как окружность. Кольцо образуется рамкой, и только верхняя часть рамки имеет другой цвет. Когда окружность вращается, цветная часть движется по кругу. Вся техника состоит из четырех идей:

1. Квадратная коробка с одинаковыми шириной и высотой.
2. border-radius: 50%, который превращает коробку в окружность.
3. Серая рамка с одной цветной стороной, border-top-color.
4. Анимация поворота, которая никогда не останавливается.

Полный код

.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); }
}

<div class="loader"></div>

Это и есть весь индикатор загрузки. Ничего не нужно скачивать, и нет зависимости, которую нужно обновлять.

Центрирование

Кольцо это обычный блочный элемент. Чтобы отцентрировать его на странице или внутри контейнера, добавьте margin: 0 auto; к .loader для горизонтального центрирования или сделайте родительский элемент flex-контейнером:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Чего инструмент не делает

• Он создает только стиль кольца. Ряды точек, полосы и импульсные индикаторы это другие решения.
• Цвет трека фиксирован, светло-серый. Если фон темный, измените его в скопированном CSS.
• Он не добавляет атрибуты доступности в вашу разметку. Добавьте role="status" и aria-label к элементу самостоятельно.

Небольшие правки после копирования

Спиннер состоит из нескольких свойств, поэтому менять его легко. Чтобы кольцо выглядело легче, уменьшите ширину рамки. Чтобы оно казалось спокойнее, увеличьте время анимации. Чтобы использовать один и тот же индикатор в двух размерах, скопируйте класс один раз и переопределите только width, height и border-width во втором классе. Короткий код главное преимущество простого спиннера: его можно прочитать целиком и изменить любое значение, не копаясь в библиотеке.

Трек можно окрасить, заменив #eee на цвет, подходящий вашей странице, а движущаяся дуга сохранит цвет, выбранный в генераторе.