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

Выберите стиль лоадера (круг, точки, полосы, пульсация), настройте его цвет, размер и скорость, а затем скопируйте сгенерированный HTML- и CSS-код. Никаких изображений — только чистый CSS, который создаётся и показывается в предпросмотре прямо в вашем браузере.

Стиль лоадера

Цвет

Размер: 48px

Скорость: 1s

HTML- и CSS-код

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="byteryo-spinner"></div>

Как это работает

Анимированный лоадер на чистом CSS намного легче GIF и автоматически подстраивается под цвет и тему вашего интерфейса. Каждый предложенный здесь стиль построен на своей CSS-анимации (@keyframes): непрерывное вращение для круга, сдвиг по времени между несколькими элементами для точек и полос, а также изменение масштаба и прозрачности для пульсации.

Работает ли сгенерированный код без JavaScript?

Да, анимация полностью управляется CSS через @keyframes: достаточно скопировать блок <style> и соответствующий HTML на свою страницу — никакие скрипты для работы лоадера не нужны.

Как показывать лоадер только во время загрузки?

Динамически добавляйте или удаляйте HTML-блок лоадера (или переключайте класс с display: none) средствами вашего привычного JavaScript-фреймворка, пока выполняется запрос или обработка, и скрывайте его, когда контент будет готов.

Код генерируется мгновенно в вашем браузере на основе ваших настроек, без подключения к серверу.