Skip to main content

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

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

20px80px
0.5s3.0s
<div class="loader-spinner"></div>
.loader-spinner {
  width: 40px;
  height: 40px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3B82F6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
Поделиться
📖

Как использовать

Step 1

Выберите загрузчик

Выберите загрузчик

Выберите понравившийся дизайн загрузчика

Step 2

Настройте

Настройте

Настройте цвета и размер

Step 3

Скопируйте

Скопируйте

Скопируйте HTML/CSS-код

Возможности

Разнообразие дизайнов

Спиннеры, точки, полосы и многое другое

Настраиваемость

Настройка цвета, размера и скорости

Копируйте и вставляйте

Копируйте HTML+CSS напрямую для использования

FAQ

Спиннер, точки, полоса, кольцо, пульсация и многие другие.

🔗Похожие инструменты

🎨
Инструменты для дизайна

Конвертер цветовых кодов

Конвертация между цветовыми кодами HEX, RGB и HSL. Используйте палитру цветов и предпросмотр в реальном времени для интуитивного выбора цвета.

🎨
Инструменты для дизайна

Палитра цветов

Выбирайте цвета с помощью цветового колеса и ползунков. Получайте и копируйте цветовые коды в форматах HEX, RGB и HSL.

🎨
Инструменты для дизайна

Извлечение цветов из изображения

Автоматическое определение доминирующих цветов изображения и генерация цветовой палитры. Также можно нажать на любую точку изображения для выбора цвета.

🎯
Инструменты для дизайна

Определение среднего цвета изображения

Вычисление среднего цвета всего изображения или выделенной области. Полезно для подбора цветовых схем или фоновых цветов миниатюр.

🌈
Инструменты для дизайна

Генератор CSS-градиентов

Визуально создавайте CSS-градиенты с помощью перетаскивания. Поддержка линейных, радиальных и конических градиентов с предустановками.

🔲
Инструменты для дизайна

Генератор CSS Box Shadow

Визуально создавайте CSS box-shadow с помощью ползунков. Поддержка нескольких теней и внутренних теней.