Генератор CSS-лоадеров

Что это за инструмент?

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

Этот инструмент генерирует четыре распространённых паттерна лоадера с реальным рабочим CSS: вращающийся спиннер на основе границы, три точки, прыгающие по очереди, круг, пульсирующий туда-сюда, и полосу со скользящей заливкой. Настройте размер, цвет и длительность в живом превью, затем скопируйте сгенерированный CSS и минимальный HTML-элемент, к которому он применяется.

Источник: CSS Animations Level 1, W3C — спецификация, определяющая @keyframes и свойства анимации, на которых построены эти лоадеры.

Зачем его использовать?

• Живое превью анимируется в реальном времени при изменении стиля, размера, цвета или скорости — вы видите именно то, что получите в итоге.
• Генерирует полный CSS, включая блок @keyframes, а не фрагмент, который нужно дописывать самому.
• Также выводит точную HTML-разметку, которую ожидает CSS — не нужно угадывать имена классов или структуру элементов.
• Четыре разных паттерна анимации (спиннер, точки, пульс, полоса) покрывают самые частые сценарии состояния загрузки.
• Чистая CSS-анимация — без JavaScript, без файлов изображений, легче и плавнее, чем анимированный GIF.
• Работает полностью в браузере, бесплатно, без регистрации.

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

1. Выберите стиль лоадера: вращающееся кольцо, прыгающие точки, пульсирующий круг или прогресс-бар.
2. Перетащите ползунок размера, чтобы увеличить или уменьшить лоадер.
3. Выберите цвет — он станет акцентным цветом лоадера (вращающаяся граница, точки или заливка полосы).
4. Настройте скорость, чтобы сделать анимацию быстрее или медленнее; большинство лоадеров интерфейса смотрятся лучше всего при 0,6–1,5 секунды на цикл.
5. Скопируйте сгенерированный CSS в вашу таблицу стилей и вставьте HTML-фрагмент туда, где должен появляться лоадер.

Пример

Ввод

Стиль: вращающееся кольцо · Размер: 40px · Цвет: оранжевый · Скорость: 1.0с

Результат

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

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

Классический кольцевой спиннер: круг с почти прозрачной границей с трёх сторон и сплошным цветом с четвёртой, непрерывно вращающийся с линейной бесконечной анимацией.

Почему CSS-лоадеры лучше анимированных GIF

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

Четыре стиля здесь — спиннер, точки, пульс, полоса — также чаще всего встречаются в реальных интерфейсах: от состояния загрузки в кнопке до оверлея на весь экран. Каждый анимирует в keyframes только transform и opacity, что браузеры могут плавно рендерить на GPU, не замедляя остальную страницу.

Выбор стиля под ситуацию

• Вращающееся кольцо: самый нейтральный, универсальный вариант — хорошо смотрится внутри кнопок и в небольших встроенных состояниях загрузки.
• Прыгающие точки: воспринимается легче и игривее; часто используется для индикатора «печатает...» в чатах и коротких ожиданий.
• Пульсирующий круг: подходит для индикатора загрузки одного элемента или как точка статуса «активен/в эфире».
• Прогресс-бар: подразумевает движение вперёд и часто ожидается при загрузке страниц или многошаговых процессах, даже без точного процента.

Использование лоадера в проекте

Вставьте сгенерированный CSS в таблицу стилей один раз, а затем повторно используйте HTML-фрагмент везде, где нужно состояние загрузки — внутри кнопки при отправке формы, поверх карточки при загрузке данных, или по центру полноэкранного оверлея. Поскольку анимация — чистый CSS, включить или выключить её так же просто, как добавить или убрать элемент из DOM, либо скрыть его через display: none.

→ Генератор box-shadow · Минификатор CSS

Часто задаваемые вопросы