Чистый CSS спиннер загрузки

Современный спиннер загрузки, созданный исключительно на чистом CSS, без использования изображений или JavaScript. Комбинируя conic-gradient и mask (или -webkit-mask), достигается стильная анимация, которая рисует плавный градиентный след.

Предпросмотр

Код реализации

Просто скопируйте приведенный ниже код и вставьте его в файлы HTML и CSS вашего проекта, чтобы добавить спиннер.

<!-- HTML -->
<div class="premium-spinner"></div>

/* CSS */
.premium-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(99, 102, 241, 0) 0%,
    rgba(99, 102, 241, 0.2) 20%,
    rgba(99, 102, 241, 1) 100%
  );
  /* Настройка маски для вырезания внутренней части */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: premium-spin 1s infinite linear;
}

@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}

Пояснение

• conic-gradient: Создает градиент, цвет которого меняется по окружности от центра. В этом спиннере плавный переход от прозрачного (rgba(99, 102, 241, 0)) к сплошному цвету (rgba(99, 102, 241, 1)) создает эффект вращающегося следа.
• mask / -webkit-mask: Использование radial-gradient в качестве маски делает центральную часть элемента прозрачной. В calc(100% - 6px) можно регулировать толщину линии спиннера (в данном случае 6px).
• animation: Использование transform: rotate(360deg) в @keyframes и linear обеспечивает бесконечное вращение с постоянной скоростью.