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

Генератор спиннера на SVG

РазработчикИзображение

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

ВХОД

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

Тип спина

Тип

Внешний вид

Размер (px)

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

Используется для спиннеров, основанных на линиях (Круговая линия, Двойной кольцо, Бар-лодер, Волна).

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

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

Цвет трека (Круговая линия, Двойное кольцо, Бар-лодер) или цвет второго точки/дуги.

Анимация

Скорость (сек)

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

Выход

Формат

Метка ARIA

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

ВЫХОД

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

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

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

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

Гид

Генератор спиннера на SVG

Создайте четкие, анимированные SVG-загрузчики прямо в браузере и скопируйте готовый код для использования в вашем проекте. Выберите из семи популярных стилей загрузчика, настройте размер, ширину линии, цвета и скорость анимации, затем сразу же увидите обновление живого предварительного просмотра. Экспортируйте как автономный встроенный SVG, простой HTML + CSS фрагмент или React-компонент (JSX).

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

Выберите тип загрузчика — Круговая линия, Двойной кольцо, Точечное кольцо, Пульсирующие точки, Колеблющиеся точки, Бар-загрузчик или Волны.
Настройте размер, ширина линии, основной цвети цвет трека / вспомогательный цвет для соответствия вашему бренду.
Установите скорость анимации (в секундах) для управления скоростью цикла загрузчика.
Выберите формат экспорта: Встроенный SVG (один файл, можно вставить в любое место), HTML + CSS (отдельный блок стилей) или React-компонент (JSX).
Скопируйте сгенерированный код из панели вывода или скачайте его как файл.

Возможности

Семь стилей загрузчиков — Круговая линия, Двойной кольцо, Точечное кольцо, Пульсирующие точки, Колеблющиеся точки, Бар-загрузчик или Волны.
Живой анимированный предварительный просмотр на фоне с сеткой, чтобы можно было сразу оценить любой выбор цвета.
Автономный встроенный SVG — анимация CSS встроена в SVG, поэтому он работает без внешнего стиля.
HTML + CSS экспорт с отдельным блоком стилей, когда вы предпочитаете отделять код и стили.
React-компонент (JSX) экспорт, готовый для вставки в проект Next.js, Vite или Create React App.
Настройка размера, ширины линии, цветов и скорости с разумными значениями по умолчанию и валидацией.
Доступность встроена — каждый загрузчик поставляется с role="status" и настраиваемым aria-label таким образом, что экранные читатели объявляют состояние загрузки.
Ограниченные имена классов на каждый фрагмент, поэтому несколько загрузчиков на одной странице не конфликтуют.

Когда использовать каждый загрузчик

Круговая линия / Двойное кольцо — для неопределённых ожиданий, когда прогресс неизвестен (запросы API, переходы страниц).
Точечное кольцо — классический индикатор «думаю», который хорошо сочетается с тонким дизайном интерфейса.
Пульсирующие точки / Колеблющиеся точки — дружелюбные, разговорные контексты, такие как индикатор «тире» в чате.
Бар-загрузчик — загрузка файлов, скачивание или любое место, где нужно широкое, низкое индикатор.
Ripple — мягкая, амбиентная обратная связь, например, моменты перед появлением контента.

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

Почему использовать SVG для спиннеров загрузки вместо анимированного GIF?

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

Определённый индикатор показывает реальное продвижение к известному общему значению, как прогресс-бар, заполняющийся от 0% до 100%. Неопределённый индикатор просто сообщает пользователю, что происходит работа, когда длительность или прогресс не могут быть измерены — например, при ожидании сетевого ответа. Большинство спиннеров (вращающиеся круги, пульсирующие точки, волны) являются неопределёнными; бар-лодеры могут быть как определёнными, так и неопределёнными, в зависимости от того, показывают ли они движущий сегмент или заполняющую долю.
Когда следует отображать спиннер загрузки вообще?

Как общее правило удобства интерфейса, не показывайте никаких индикаторов для действий, которые завершаются менее чем за 100 мс — интерфейс будет казаться мгновенным. В диапазоне от 100 мс до 1 секунды достаточно небольшого встроенного индикатора рядом с элементом, который был затронут. После 1 секунды используйте ясный спиннер. Для ожиданий длиной более 10 секунд перейдите к определённому индикатору прогресса с осмысленным сообщением, потому что пользователи начинают терять доверие к тому, что система продолжает работать.
Как работают CSS-анимации внутри SVG?

CSS-анимации целенаправлены на элементы SVG так же, как и на HTML-элементы: вы пишете правило keyframes и применяете его через свойство animation на классе. Обычные цели включают вращение трансформаций для вращений, прозрачность для плаваний и stroke-dashoffset для эффекта рисования на кругах и линиях. Чтобы вращение происходило вокруг визуального центра формы, установите transform-origin в этот центр. Анимации, объявленные внутри элемента style внутри самого SVG, остаются в пределах этого документа, поэтому встроенный SVG работает, когда помещается на любую страницу.
Как сделать спиннер загрузки доступным для экранных читателей?

Пометьте элемент спиннера с role=status (или role=progressbar для определённого прогресса), чтобы технологии для помощи рассматривали обновления как живую область. Предоставьте короткое и значимое aria-label, например, Загрузка или Сохранение, чтобы было объявлено назначение, и избегайте полагаться только на цвет для передачи состояния. Для определённого прогресса также установите aria-valuenow, aria-valuemin и aria-valuemax, чтобы процент был объявлен при обновлении.