Генератор CSS-загрузчиков

Как устроен сгенерированный CSS

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

Спиннер, это круг, нарисованный толстой рамкой. Свойство border-top-color окрашивает только верхнюю часть кольца акцентным цветом, поэтому кольцо читается как дуга, а правило @keyframes spin вращает её вокруг центра. Вращение через transform: rotate() остаётся лёгким, потому что браузер двигает элемент на композиторе, а не перерисовывает его кадр за кадром.

Чтобы показать спиннер на странице, добавьте один элемент и подключите CSS:

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

Позаботьтесь о доступности

• Добавьте role="status", чтобы программы чтения с экрана озвучивали спиннер.
• Укажите aria-label с текстом состояния, например «Загрузка».
• Не прячьте контент за спиннером дольше нескольких секунд без запасного варианта по тайм-ауту.
• Уважайте prefers-reduced-motion. Тем, кто отключил анимации, вместо вращения покажите простое затухание или статичный текст «Загрузка…»:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Когда использовать спиннер, а когда оптимистичный интерфейс

• Ответ быстрее 100 мс: спиннер не нужен; глаз почти не замечает задержку.
• 100 мс – 1 с: ненавязчивый спиннер (маленькое кольцо, текст кнопки «Загрузка…») предотвращает двойные клики.
• 1 с – 10 с: заметный спиннер, в идеале с прогрессом, если его можно измерить.
• > 10 с: это уже не проблема спиннера; выясните, что тормозит, и исправьте.

При отправке форм и нажатиях на кнопки спиннер внутри кнопки обычно лучше, чем оверлей на весь экран.