Реклама мешает? Идти Без рекламы Сегодня 

Генератор анимации загрузки CSS

ЦветРазработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Тип анимации

Тип

Внешний вид

Размер (px)

Общие размеры загрузчика в пикселях.

Ширина линии (px)

Используется для загрузчиков на основе кольца (Вращающееся кольцо, Двойное кольцо, Пульсирующий круг).

Основной цвет

Трек / Вторичный цвет

Цвет трека для загрузчиков на основе кольца; игнорируется для типов с точками.

Анимация

Длительность (сек)

Длительность одного полного цикла анимации, в секундах.

Выход

Формат

Метка ARIA

Метка, объявляемая экранными читателями.

ВЫХОД

Клиентская сторона

Живой просмотр

Сгенерированный код

Реклама · УДАЛИТЬ?

Гид

Генератор анимаций загрузки на чистом CSS

Генератор анимации загрузки CSS

Генерация восьми популярных анимаций загрузки на чистом CSS — вращающееся кольцо, двойное кольцо, пульсирующие точки, колеблющиеся точки, колеблющийся шарик, бары равномерности, пульсирующий круг и индикатор ввода текста. Настройте цвет, размер, ширину линии и длительность; наблюдайте за мгновенным обновлением предварительного просмотра; скопируйте @keyframes и минимальный HTML в свой проект. Нет JavaScript, нет SVG, нет внешних зависимостей.

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

Выберите тип анимации из выпадающего списка.
Установите размер загрузчика в пикселях и скорректируйте ширину линии для типов на основе кольца.
Выберите основной цвет и цвет трека / вторичный цвет.
Установите длительность (в секундах) одного полного цикла.
Выберите формат вывода — HTML + CSS, только CSS или только HTML.
Опционально задайте кастомную метку ARIA для экранных читателей.
Скопируйте сгенерированный фрагмент или скачайте его в виде файла.

Возможности

Восемь стилей анимации — охватывает наиболее распространённые паттерны загрузки в современных интерфейсах.
Живой предварительный просмотр — при каждом изменении мгновенно перерисовывается, чтобы вы могли проверить длительность и плавность перед копированием.
Предоставление на чистом CSS — нет затрат на выполнение JavaScript и нет необходимости в SVG-макетах.
Ограниченные имена классов — каждый сгенерированный фрагмент использует уникальный префикс, чтобы несколько загрузчиков могли сосуществовать без конфликта.
Доступность по умолчанию — каждый загрузчик включает роль «статус» и настраиваемую метку aria-label.
Три режима вывода — объединённый HTML + CSS, только CSS или только HTML, в зависимости от того, как вы интегрируете.

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

Что делает @keyframes в CSS?

Инструмент @keyframes определяет промежуточные шаги анимации CSS. Каждый шаг (0%, 50%, 100% и т.д.) описывает стили, которые должен иметь элемент в этот момент цикла анимации. Браузер интерполирует между шагами, чтобы обеспечить плавное движение. Без @keyframes свойство анимации не будет работать.
Почему использовать анимации CSS вместо SVG или JavaScript для загрузчиков?

Анимации CSS работают на потоке композитора браузера, что означает, что они продолжают плавно работать даже при загруженной основной JavaScript-поток. Они не требуют скриптов, не увеличивают нагрузку и хорошо справляются с устаревшими устройствами. SVG и JavaScript-загрузчики могут выполнять более сложные задачи, но для простого спиннера или колеблющихся точек CSS — самый легкий и надежный вариант.
Что такое функция кубической интерполяции?

Функция кубической интерполяции описывает, как анимация ускоряется и замедляется во времени с помощью четырёх контрольных точек на кривой. В сравнении с ключевыми словами, такими как linear или ease-in-out, кубическая интерполяция позволяет тонко настраивать ощущение движения — например, колеблющийся шарик использует cubic-bezier(0.5, 0.05, 0.5, 0.95), чтобы имитировать силу тяжести.
Почему загрузочные анимации требуют роли и метки aria-label?

Экранные читатели не видят вращающегося круга, поэтому им нужно программное указание на то, что происходит. Роль «статус» сообщает технологиям поддержки, что элемент передаёт обновление статуса в реальном времени, а метка aria-label предоставляет текст, который будет объявлен. Без этих атрибутов загрузчик недоступен для пользователей с нарушениями зрения.