Генератор CSS-спиннера для оверлея

Две части: спиннер и оверлей

Генератор создает спиннер: класс .loader и правило @keyframes spin. Оверлей это отдельная обертка, которую вы добавляете сами. Она покрывает всю область просмотра и центрирует свой дочерний элемент. Такое разделение удобно: один и тот же спиннер можно использовать в кнопке или карточке, а обертку нужна только тогда, когда требуется блокирующее состояние.

CSS обертки

Вставьте это после сгенерированных правил:

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

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

position: fixed с inset: 0 растягивает слой до всех четырех краев экрана. Настройки flex центрируют спиннер по обеим осям. z-index держит слой над обычным контентом, поэтому увеличьте его, если шапка или модальное окно все еще оказываются поверх.

Перекройте одну область, а не всю страницу

Если загружается только карточка или таблица, задайте ее контейнеру position: relative, а обертку сделайте position: absolute:

.panel { position: relative; }
.panel .overlay { position: absolute; }

Остальная страница остается доступной, а затемняется только эта панель.

Подберите цвет оверлея под страницу

На темной странице также измените цвет трека #eee в скопированном CSS индикатора, чтобы кольцо не светилось слишком сильно.

Хорошие практики

• Убирайте оверлей сразу после завершения работы, иначе страница останется заблокированной.
• Используйте его для коротких ожиданий. При длительных операциях показывайте текст, который объясняет, что происходит.
• Разметка оверлея и управление фокусом это ваш собственный код. Инструмент создает только спиннер.

Остановите прокрутку страницы

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