Генератор CSS-анимации загрузки
Создайте автономный спиннер загрузки на CSS+HTML — кольцо или пульсирующие точки — с пользовательским цветом, размером и скоростью. Чистый CSS, без GIF и JS.
Ввод
Длительность одного полного цикла анимации в секундах (0.2-5).
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-loading-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"loaderType": "ring",
"color": "#3498db",
"size": "40",
"speed": "1"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-loading-animation-generator` tool (CSS Loading Animation Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-loading-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS-анимации загрузки — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что это делает
Генератор CSS-анимации загрузки создает автономный спиннер загрузки, готовый к копированию-вставке, используя только CSS @keyframes — без GIF, без изображений, без библиотеки анимации JavaScript. Выберите тип загрузчика, цвет, размер и скорость, и инструмент выведет разметку HTML и CSS-правила, необходимые для его отрисовки, обновляя мгновенно при настройке каждого управления.
Почему CSS-спиннеры лучше GIF и JS
Анимированные GIF-загрузчики и спиннеры на JavaScript когда-то были стандартом, но чистый CSS-загрузчик почти всегда является лучшим выбором:
- Размер файла — GIF-загрузчик обычно содержит несколько килобайт двоичных данных изображения; CSS-загрузчик — это несколько сотен байт текста, которые дополнительно сжимаются с помощью gzip и кешируются вместе с остальной таблицей стилей.
- Четкость при любом размере или DPI — GIF — это растровые изображения, которые размываются или пикселизируются при масштабировании или просмотре на экранах высокой плотности. CSS-загрузчик рисуется с помощью
border,backgroundиtransform, поэтому остается четким при любом размере. - Мгновенные изменения цвета/размера — перекраска GIF означает повторный экспорт изображения; цвет CSS-загрузчика — это одно значение, которое вы можете переименовать, переопределить или варьировать для каждого компонента.
- JavaScript не требуется — анимация работает полностью на CSS-свойстве
animationи ускоренных GPU-свойствахtransform/opacity, поэтому продолжает плавно анимироваться, даже когда главный поток занят — именно тогда, когда индикатор загрузки должен работать.
Используйте библиотеку анимации на JavaScript только если вам нужно что-то, что не может выразить чистой цикл @keyframes CSS — движение на основе физики, анимация, синхронизированная с реальным прогрессом загрузки, или сложное многоэтапное секвенирование. Для простого индикатора "что-то загружается" CSS проще и легче.
Типы загрузчиков
- Ring Spinner — круг, построенный из
border, с верхним краем, окрашенным иначе, чем остальная часть, иborder-radius: 50%; анимация keyframerotateпостоянно его вращает. Это наиболее узнаваемый индикатор загрузки в Интернете. - Pulsing Dots — три маленьких круга, которые увеличиваются и исчезают по очереди, каждый с шахматной
animation-delay, так что пульсация кажется движущейся через точки.
Как использовать
- Выберите Тип загрузчика — Ring Spinner или Pulsing Dots.
- Выберите Цвет для загрузчика.
- Отрегулируйте Размер, чтобы соответствовать тому, где будет находиться загрузчик (кнопка, карточка, полноэкранный оверлей).
- Установите Скорость, чтобы контролировать, сколько секунд занимает один цикл анимации — меньше быстрее, больше медленнее.
- Скопируйте блок CSS в вашу таблицу стилей и фрагмент HTML в вашу разметку. Оба полностью независимы; ничего больше не требуется для работы анимации.
Часто задаваемые вопросы
Мне нужна какая-нибудь дополнительная библиотека или скрипт, чтобы это работало?
Нет. Все работает на CSS-правиле @keyframes, поставляемом в выходе CSS — просто включите CSS и разметку HTML, остальное делает браузер.
Могу ли я повторно использовать один и тот же загрузчик в нескольких местах на странице?
Да — CSS ориентирован на класс .io-loader, поэтому одни и те же правила применяются везде, где используется разметка. Если вам нужны разные цвета или размеры в разных местах, создайте вариант здесь и переименуйте класс (или добавьте класс-модификатор) перед вставкой.
Почему HTML включает role="status" и aria-label="Loading"?
Это делает загрузчик доступным для программ чтения с экрана, которые иначе не способны определить, что чисто визуальный спиннер представляет состояние загрузки.
Эта инструмент что-либо хранит или загружает? Нет. Каждое значение, которое вы вводите — тип загрузчика, цвет, размер и скорость — обрабатывается локально в вашем браузере для создания фрагмента. Ничего не отправляется на сервер и не сохраняется.