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

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

Генератор CSS-лоадеров — это бесплатный браузерный инструмент для веб-дизайнеров и фронтенд-разработчиков, которым нужен индикатор загрузки на чистом CSS без подключения библиотеки. Выберите один из пяти стилей — спиннер, кольцо, точки, полосы и пульс — и управляйте размером в пикселях, основным цветом, скоростью одного цикла анимации в секундах, толщиной обводки и количеством точек или полос. Живой предпросмотр анимируется по мере редактирования, а соответствующая HTML-разметка вместе с блоком стилей CSS с @keyframes обновляется мгновенно, так что вы можете вставить её прямо на страницу. Используйте его для кнопок, загрузчиков страниц, состояний-скелетонов и асинхронных заглушек или чтобы понять, как CSS-анимация и @keyframes управляют каждым эффектом.

Как пользоваться Генератор CSS-лоадеров

1. Выберите стиль лоадера: спиннер, кольцо, точки, полосы или пульс.
2. Задайте размер в пикселях и выберите цвет с помощью образца или введя значение.
3. Задайте скорость анимации в секундах для одного полного цикла.
4. Откройте «Настройки», чтобы изменить толщину обводки (спиннер и кольцо) или количество точек или полос.
5. Наблюдайте за анимацией в живом предпросмотре, затем скопируйте сгенерированные HTML и CSS кнопкой копирования.

Примеры

Стиль: спиннер, размер 48px, цвет #4f86f7, скорость 1s, толщина 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Стиль: точки, размер 48px, цвет #9333ea, скорость 1s, количество 3

<div class="dd-loader"><div></div><div></div><div></div></div> со смещённым animation-delay, чтобы точки масштабировались волной.

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

Какие стили лоадеров доступны?

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

Что делают элементы управления размером, цветом и скоростью?

Размер задаёт размеры лоадера в пикселях, цвет задаёт основной цвет (используйте палитру или введите любой CSS-цвет), а скорость — это длительность одного цикла анимации в секундах. Толщина управляет обводкой спиннера и кольца, а количество — сколько точек или полос отображается.

Сгенерированный CSS — это чистый CSS без JavaScript?

Да. Фрагмент — это обычный HTML плюс блок <style> с использованием CSS-анимации и @keyframes, поэтому он работает без какого-либо JavaScript или внешней библиотеки. Вставьте его на страницу, и он работает сам по себе.

Почему толщина и количество меняют не каждый стиль?

Толщина влияет только на спиннер и кольцо (которые рисуют рамку), а количество влияет только на точки и полосы (которые отображают несколько элементов). Остальные стили их игнорируют, поэтому вывод остаётся чистым для выбранного вами стиля.

Загружается ли что-нибудь на сервер?

Нет. Лоадер и его CSS создаются полностью в вашем браузере с помощью локальных операций со строками — никакие настройки, цвета или код никогда не отправляются на сервер, поэтому он работает офлайн и сохраняет вашу работу приватной.