В этой статье
Что такое CSS-лоадеры и почему они важны
CSS-лоадеры — это лёгкие анимированные индикаторы, которые сообщают пользователям, что за кулисами происходит какой-то процесс. Будь то загрузка данных, обработка файла или ожидание ответа API — хорошо спроектированный лоадер предотвращает у пользователей ощущение, что приложение зависло.
В отличие от GIF- или JavaScript-спиннеров, чистые CSS-лоадеры не зависят от разрешения, имеют минимальный размер файла и плавно отрисовываются на любом устройстве. Они не требуют внешних зависимостей и интегрируются непосредственно в вашу таблицу стилей, что делает их предпочтительным выбором для современных веб-приложений.
Как работает генератор CSS-лоадеров
Генератор позволяет визуально настроить анимацию загрузки и мгновенно скопировать готовый для production CSS-код.
- Выберите стиль лоадера — из спиннера, точек, полос, пульсации, кольца и других распространённых паттернов анимации, подходящих к вашему дизайну
- Настройте внешний вид — отрегулируйте размер, цвет, скорость анимации и толщину в соответствии с вашим брендом или дизайн-системой
- Скопируйте код — генератор выдаёт чистый, минимальный CSS с keyframe-анимациями и HTML-разметку, необходимую для отображения лоадера
- Вставьте и используйте — добавьте CSS в вашу таблицу стилей, а HTML-элемент — туда, где нужен индикатор загрузки
Попробуйте бесплатно — без регистрации
Открыть генератор CSS-лоадеров →Когда использовать CSS-лоадеры
Индикаторы загрузки повышают воспринимаемую производительность и удовлетворённость пользователей во многих распространённых сценариях.
- Загрузка данных через API — показывайте спиннер, пока приложение загружает данные с сервера, чтобы пользователи знали, что интерфейс отзывчив и работает
- Отправка форм — отображайте лоадер после нажатия кнопки отправки, чтобы указать, что запрос обрабатывается, и предотвратить повторные нажатия
- Переходы между страницами — используйте лоадер при смене маршрутов в одностраничных приложениях, чтобы заполнить паузу между сменой контента
Часто задаваемые вопросы
CSS-лоадеры лучше GIF-спиннеров?
Да, в большинстве случаев. CSS-лоадеры векторные, поэтому остаются чёткими на Retina-дисплеях, обычно занимают менее 1 КБ кода и могут быть настроены с помощью CSS-переменных без создания новых файлов изображений. GIF-спиннеры — это растровые изображения, которые могут выглядеть размытыми на экранах с высоким DPI и добавляют дополнительные HTTP-запросы.
Работают ли CSS-лоадеры во всех браузерах?
Современные CSS-анимации и keyframe-кадры поддерживаются во всех актуальных браузерах, включая Chrome, Firefox, Safari и Edge. Сгенерированный код использует стандартные CSS-свойства без вендорных префиксов, которые больше не нужны для поддержки анимаций.
Как центрировать CSS-лоадер на странице?
Используйте CSS Flexbox или Grid на родительском контейнере. Установите для родителя display flex с align-items center и justify-content center и задайте высоту (например, 100vh для полноэкранных лоадеров). Элемент лоадера будет идеально отцентрирован как по горизонтали, так и по вертикали.