Путь задачи / от ввода к результату
Как создать CSS-лоадер
- 01
Выберите стиль индикатора
Откройте «Стиль индикатора» и выберите «Орбитальное кольцо» для классического вращающегося кольца или «Три точки» для подпрыгивающей тройки точек. Живой предпросмотр анимируется при каждом изменении, и каждый стиль при экспорте приносит собственные @keyframes.
- 02
Задайте размер рамки и обводки
Размер рамки — 24–160 px, линии или точки — 2–20 px. Линия кольца должна быть меньше половины рамки. Три точки с промежутками не менее 2 px должны помещаться внутри; иначе копирование и скачивание отключены. Размер кольца в экспорте включает границу.
- 03
Настройте скорость и цвета
Выберите «Длительность цикла» от 0,2 до 4 секунд с шагом 0,05 с. «Активный цвет» задаёт верхнюю границу кольца или центральную точку, а «Цвет дорожки» — остальную часть кольца или две крайние точки. Медленные циклы воспринимаются как спокойная фоновая работа, быстрые — как нечто срочное.
- 04
Или начните с примера
Нажмите «Пример», чтобы применить смелый пресет «Три точки» — рамка 72 px, точки 12 px и цикл 0,75 с в красном и жёлтом — как отправную точку. «Сбросить» всегда возвращает орбитальное кольцо по умолчанию.
- 05
Скопируйте или скачайте CSS
Нажмите «Копировать CSS», чтобы поместить набор правил в буфер обмена, или «Скачать .css», чтобы сохранить toolars-loader.css. Панель вывода показывает точное число байт, которые вы экспортируете, и обе кнопки остаются отключёнными, пока какое-либо значение не пройдёт проверку.
- 06
Подключите к своей разметке
«Орбитальное кольцо» требует одного элемента с классом .loader; «Три точки» ожидает три дочерних span внутри него. Экспорт включает блок prefers-reduced-motion, который останавливает анимацию для чувствительных к движению посетителей.