Генератор CSS-лоадера (загрузка)
Нажмите на шаблон, настройте цвет, размер и скорость и скопируйте код. Все они используют только transform и opacity, которые легки для браузера, и учитывают тех, кто предпочитает меньше движения.
Как пользоватьсяАнимации загрузки на CSS
Доступно на: 
Генератор CSS-лоадера (загрузка): для чего нужен
Выберите один из семи шаблонов индикатора загрузки (кольцо, двойное кольцо, точки, полосы, пульс, индикатор выполнения и вращающийся квадрат) и настройте цвет, размер и длительность. В анимациях используются только transform и opacity.
Код содержит role=status, скрытый текст для скринридеров и более медленную анимацию для тех, кто в системе просит меньше движения.
Как пользоваться
- Выберите шаблон лоадера.
- Настройте цвет, размер и длительность.
- Скопируйте HTML и CSS.
Когда использовать
- Экраны загрузки сайтов и систем.
- Замена тяжёлых GIF-загрузчиков.
Частые вопросы
Почему CSS, а не GIF?
CSS-лоадер весит несколько байт, остаётся чётким на любом экране, меняет цвет через переменную и выполняется вне основного потока браузера, поэтому остаётся плавным, даже пока страница загружается.
Доступен ли лоадер?
Код включает role=status и скрытый текст (Загрузка…) для скринридеров. При prefers-reduced-motion анимация заметно замедляется для тех, кто просит меньше движения.
Когда показывать лоадер?
Только если ожидание превышает примерно полсекунды. При очень коротком ожидании мелькающий на экране лоадер скорее раздражает, чем помогает.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.