Генератор CSS-завантажувачів
Генератор CSS-лоадерів створює анімації завантаження на чистому CSS у шести стилях — спінер, стрибучі крапки, кільце, пульс, смужки та подвійне кільце — з налаштуванням розміру, кольору, швидкості й товщини та видає і CSS, і HTML.
Про цей інструмент
Генератор CSS-лоадерів створює анімації завантаження на чистому CSS у шести стилях — спінер, стрибучі крапки, кільце, пульс, смужки та подвійне кільце — з налаштуванням розміру, кольору, швидкості й товщини та видає і CSS, і HTML.
Як користуватися
- Виберіть стиль лоадера.
- Налаштуйте розмір, колір, швидкість і товщину.
- Перевірте живий перегляд.
- Натисніть «Копіювати CSS + HTML» і вставте обидва фрагменти на свою сторінку.
Корисно знати
- Лоадерам на чистому CSS не потрібні зображення, GIF чи JavaScript.
- Спінери обертаються за допомогою @keyframes і transform: rotate(), що ефективно для анімації.
- Розмітка — це один елемент або кілька дочірніх елементів для крапок і смужок.
- Додайте role="status" і візуально прихований підпис на кшталт «Завантаження…», щоб програми зчитування екрана оголошували лоадер.
- Варто сповільнювати або зупиняти лоадери за prefers-reduced-motion.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Як зробити спінер завантаження на CSS?
Задайте квадратному елементу рамку з одним кольоровим боком, border-radius: 50% та анімацію обертання @keyframes — або скопіюйте готовий з цього генератора.
Чи кращі CSS-лоадери за GIF?
Зазвичай так: вони легші, залишаються чіткими за будь-якого розміру, а їхні колір і швидкість можна змінити через CSS.
Як зробити лоадер доступним?
Обгорніть його в елемент з role="status" і додайте прихований текст на кшталт «Завантаження…», щоб допоміжні технології могли його оголосити.
Як відцентрувати лоадер на сторінці?
Помістіть його в контейнер з display: flex; justify-content: center; align-items: center;.