Как пользоваться: Генератор CSS-лоадеров
- Нажмите на любой лоадер в галерее — каждый вариант работает в реальном времени.
- Измените размер, толщину, скорость и цвета — все варианты обновятся одновременно.
- Переименуйте CSS-класс, если он конфликтует с вашим проектом.
- Скопируйте HTML и CSS (или версию для React) и вставьте их на свою страницу.
Зачем нужен лоадер на чистом CSS?
CSS-спиннер весит несколько сотен байт, не требует запроса изображения или JavaScript, чётко масштабируется до любого размера и перекрашивается одной переменной. Каждый лоадер здесь собран из одного элемента (и нескольких span для точек и полос) и анимируется через transform и opacity, поэтому он остаётся плавным, даже когда основной поток занят загрузкой вашего приложения.
Настройка через CSS-переменные
Сгенерированный CSS задаёт для класса лоадера переменные --size, --color, --track, --thickness и --speed. Поэтому можно создать маленький белый вариант для кнопок, не копируя CSS заново: <span class="loader" style="--size:18px;--color:#fff">.
Доступность
- Лоадер имеет
role="status"и визуально скрытую подпись «Loading…», поэтому программы чтения с экрана сообщают о загрузке. - Если включено уменьшение движения, анимация замедляется, но не останавливается: замерший спиннер воспринимается как зависание.
- Показывайте лоадер только через ~300 мс. Если он мелькает при быстрых запросах, это ощущается медленнее, чем отсутствие индикатора.
Нужна собственная анимация загрузки? Создайте её в генераторе CSS-анимаций и подберите кривую плавности в генераторе cubic-bezier.
Инструменты, которые хорошо сочетаются с Генератор CSS-лоадеров
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
- Генератор CSS-анимаций при наведении — Создавайте анимации при наведении для кнопок, карточек, ссылок и иконок.
Часто задаваемые вопросы
Можно ли использовать эти лоадеры в коммерческих проектах?
Да. CSS генерируется для вас, лицензия и указание авторства не требуются.
Как показывать лоадер только во время загрузки?
Выводите элемент лоадера во время ожидания и удаляйте его (или добавляйте атрибут
hidden), когда данные получены. В React рендерите его условно: {loading && <Loader />}.Будет ли он работать внутри кнопки?
Да. Задайте маленький размер и цвет, совпадающий с текстом кнопки, через CSS-переменные, например
style="--size:16px;--thickness:2px;--color:currentColor".Можно ли установить Генератор CSS-лоадеров как веб-приложение и пользоваться им офлайн?
Да. Генератор CSS-лоадеров — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.