Генератор CSS-лоадеров
Бесплатный генератор CSS-лоадеров: десять спиннеров загрузки на чистом CSS с живой настройкой размера, скорости, толщины и цвета и копированием готовых HTML и CSS.
Что создает генератор CSS-лоадеров?
Он собирает анимированные индикаторы загрузки на чистом CSS: спиннер, точки, полосы, рябь, пульс, орбита, переворот, волна, прыжок и градиентное кольцо. Каждый генерируется с выбранными размером, скоростью, толщиной и цветом и копируется как HTML плюс CSS.
Нужны ли лоадерам JavaScript или картинки?
Нет. Каждый лоадер — это обычные HTML-элементы, анимированные CSS-кейфреймами. Никаких картинок, иконочных шрифтов, библиотек и исполняемых скриптов — достаточно одного блока CSS.
Как добавить лоадер на сайт?
Кликните по лоадеру в сетке, вставьте HTML-блок туда, где он должен появиться, а CSS-блок — в вашу таблицу стилей. CSS самодостаточен и содержит нужные правила @keyframes.
За что отвечают четыре параметра?
Размер задает ширину и высоту всех лоадеров, скорость меняет длительность анимации, толщина влияет на рамки и ширину полос, а цвет мгновенно перекрашивает все элементы в сетке и в коде.
Почему скопированный лоадер не анимируется?
Чаще всего скопировали только правила классов без блока @keyframes или переименовали класс в HTML, но не в CSS. Копируйте оба блока как есть и не меняйте имена классов.
Насколько производительны анимации?
Очень. Все лоадеры анимируют только transform и opacity — свойства, которые браузер компонует на GPU без вызова layout и paint, поэтому плавность сохраняется даже при нескольких лоадерах на странице.
Доступны ли лоадеры для скринридеров?
Спиннеры — визуальное украшение, поэтому скринридерам поможет текстовая подсказка. Добавьте рядом скрытый ярлык «Загрузка» или задайте лоадеру aria-hidden="true" и сообщайте прогресс отдельно.
Отправляются ли данные на сервер?
Нет. Генератор полностью работает в браузере. Ваши настройки не покидают страницу, а сгенерированный код собирается локально на устройстве.
Как использовать Генератор CSS-лоадеров
Генератор CSS-лоадеров строит анимированные индикаторы загрузки на чистом CSS — без картинок, без JavaScript, без зависимостей. Выберите один из десяти стилей, настройте размер, скорость, толщину и цвет, затем скопируйте сгенерированные HTML и CSS прямо в свой проект.
- Настройте глобальные параметры четырьмя контролами: «Размер» задаёт бокс каждого лоадера, «Скорость» меняет длительность анимации, «Толщина» управляет рамками и шириной полос, «Цвет» окрашивает все элементы.
- Просматривайте сетку: все десять лоадеров продолжают жить анимацией с текущими настройками, их удобно сравнить одним взглядом. Кликните любой лоадер, чтобы выбрать его.
- Панель деталей показывает выбранный лоадер крупнее вместе с HTML-фрагментом и соответствующим CSS (включая нужные @keyframes).
- Нажмите «Копировать HTML» или «Копировать CSS», чтобы отправить каждый блок в буфер обмена. CSS самодостаточен — вставьте его в таблицу стилей, а HTML разместите там, где должен появиться лоадер.
- Измените любой параметр — сетка, детальный предпросмотр и оба блока кода обновятся мгновенно.
Поскольку лоадеры чистый CSS, они почти не тратят трафик и остаются резкими на любом экране. Для доступности сопроводите анимацию текстовой подписью и избегайте длительностей меньше примерно 0,5 с — слишком быстро мигающие спиннеры тревожат больше, чем успокаивают.
Похожие инструменты
- Минификатор CSS Бесплатный онлайн-минификатор CSS. Мгновенно сжимайте и оптимизируйте CSS-код, удаляя пробелы, комментарии и лишние символы. Уменьшайте размер файла для ускорения загрузки сайта.
- Форматировщик CSS Мгновенно форматируйте и beautify CSS-код. Преобразуйте минифицированный CSS в читаемый код с настраиваемыми параметрами.
- Генератор Border Radius Бесплатный онлайн генератор border-radius. Перетащите 8 маркеров или выберите пресет капли, чтобы создать органичные CSS-формы и мгновенно скопировать код.
- Конвертер цветов Бесплатный онлайн-конвертер цветов. Мгновенное преобразование HEX, RGB, HSL, HSV с визуальным пикером. 100% конфиденциально, работает в браузере.
- Генератор CSS easing Бесплатный онлайн-генератор easing для CSS. Перетаскивайте контрольные точки cubic-bezier на интерактивной кривой, выбирайте из 18 пресетов, смотрите зацикленную анимацию шарика и мгновенно копируйте функцию тайминга.
- Генератор text-shadow CSS Бесплатный онлайн-генератор text-shadow CSS. Складывайте несколько слоёв тени со смещением, размытием, цветом и прозрачностью, пробуйте пресеты «Неон», «3D», «Ретро» и мгновенно копируйте CSS.
- Генератор CSS clip-path Бесплатный онлайн-генератор CSS clip-path. Создавайте формы polygon, circle, ellipse и inset с перетаскиваемыми точками, живым предпросмотром и копированием CSS в один клик.
- Генератор Border Radius CSS Визуальный генератор border-radius CSS. Настраивайте каждый угол независимо с предпросмотром в реальном времени и мгновенно копируйте CSS-код.