Softonic

Генератор анимации CSS-спиннера

Шаг 1 / 2
Далее

Анимация CSS-спиннера это кольцо, которое вращается бесконечно благодаря правилу keyframes. Здесь вы задаете скорость вращения, смотрите движение и копируете и класс, и блок @keyframes.

Как настроить анимацию

  1. 1

    Введите скорость

    В поле Скорость (с) укажите, сколько секунд должен занимать один полный оборот, например 0,8 или 1,2.

  2. 2

    Посмотрите предпросмотр

    Кольцо сразу начнет вращаться с этой скоростью, и вы оцените, насколько движение спокойное или тревожное.

  3. 3

    Настройте размер и цвет

    Измените Размер, Толщину и Цвет, чтобы анимация подходила месту, где она будет использоваться.

  4. 4

    Скопируйте CSS

    Скопируйте сгенерированные правила. Строка animation и keyframes работают вместе.

Как устроена анимация

Сгенерированный CSS состоит из двух частей, которые работают вместе. Свойство animation у .loader задает имя анимации, ее длительность, функцию времени и повтор:

animation: spin 0.8s linear infinite;

Правило @keyframes spin описывает само движение. Оно содержит только конечное состояние, то есть поворот на 360 градусов. Браузер начинает с обычного положения элемента и плавно переходит к этому конечному состоянию:

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

Поле Скорость (с) в инструменте становится длительностью. Все остальное, включая linear и infinite, остается прежним.

Выбор длительности

Секунд на оборот Как это ощущается
0,4–0,6 Быстро и активно, может выглядеть нервно
0,8–1 Ровно, обычный выбор
1,2–1,6 Спокойно, подходит крупным спиннерам
2 и больше Вяло, может выглядеть как зависание

Большие кольца могут вращаться немного медленнее маленьких, потому что край большой окружности и так проходит большее расстояние за секунду.

Почему линейное время

Инструмент использует linear, чтобы кольцо сохраняло одинаковую угловую скорость на всем обороте. Кривые плавности, например ease-in-out, заставляют кольцо замедляться и ускоряться на каждом обороте, что для бесконечного цикла выглядит как рывки. Если такой эффект все же нужен, замените слово linear в скопированном CSS.

Ограничения, о которых стоит помнить

  • Скорость 0 дает анимацию нулевой длительности, поэтому кольцо заметно не повернется. Используйте значение больше 0.
  • Спиннер всегда вращается по часовой стрелке. Чтобы развернуть направление, после копирования замените конечный поворот на -360deg.
  • Движение это одно непрерывное вращение. Пульсация, подпрыгивание или многоэтапное движение требуют дополнительных keyframes, которые пишутся вручную.

Пауза и управление анимацией

Когда CSS окажется на вашей странице, анимацией можно управлять стандартными свойствами. Значение animation-play-state: paused; останавливает кольцо на месте, что удобно для состояния, когда работа завершена, но элемент должен оставаться видимым. Значение animation-delay: 0.2s; откладывает старт, так что спиннер появляется, только если ожидание не мгновенное. Это обычные свойства CSS, которые вы добавляете в правило .loader после копирования.

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

Уменьшите число в поле Скорость (с). Значение 0,6 означает, что один полный оборот занимает шесть десятых секунды, так что спиннер вращается быстрее, чем при значении 1.

Оно повторяет анимацию бесконечно. Если заменить его числом, например 3, кольцо остановится после трех оборотов.

Да. Измените имя в двух местах: после animation: в классе и после @keyframes. Имена должны совпадать точно.

Браузер может анимировать transform без пересчета верстки страницы, поэтому это легкий способ перемещать элемент. Обычно движение получается плавным даже на не самых мощных устройствах.

Сопутствующие инструменты

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 под чистый JavaScript, React или Vue: TypeScript, Babel, CSS или Sass, изображения, HtmlWebpackPlugin, dev-сервер и команда npm install.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Валидатор XSD

Проверьте XML-документ в соответствии с схемой XSD и выявите несоответствия между элементами и их типами, указав точные номера строк.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Конвертер размера файлов

Преобразуйте значения между байтами, КБ, МБ, ГБ, ТБ и двоичными единицами IEC (KiB, MiB, GiB, TiB), свободно сочетая десятичные и двоичные единицы.

Инструмент доступен на других языках

Руководства и сценарии использования