У цій статті
Що таке CSS-завантажувачі і чому вони важливі
CSS-завантажувачі — це легкі анімовані індикатори, які повідомляють користувачам, що щось відбувається у фоновому режимі. Незалежно від того, чи сторінка завантажує дані, обробляє файл або очікує відповідь API, добре спроєктований завантажувач запобігає враженню, що застосунок завис.
На відміну від GIF або JavaScript-спінерів, чисті CSS-завантажувачі не залежать від роздільної здатності, мають мінімальний розмір файлу та плавно відображаються на будь-якому пристрої. Вони не потребують жодних зовнішніх залежностей та інтегруються безпосередньо у вашу таблицю стилів, що робить їх переважним вибором для сучасних вебзастосунків.
Як працює генератор CSS-завантажувачів
Генератор дозволяє візуально налаштувати анімацію завантаження та миттєво скопіювати готовий до виробництва CSS-код.
- Виберіть стиль завантажувача — оберіть з-поміж спінера, крапок, смуг, пульсації, кільця та інших поширених шаблонів анімації, що підходять до вашого дизайну
- Налаштуйте зовнішній вигляд — змініть розмір, колір, швидкість анімації та товщину відповідно до вашого бренду або дизайн-системи
- Скопіюйте код — генератор видає чистий, мінімальний CSS з анімаціями ключових кадрів та HTML-розмітку, необхідну для відображення завантажувача
- Вставте та використовуйте — додайте CSS у вашу таблицю стилів і розмістіть HTML-елемент скрізь, де вам потрібен індикатор завантаження
Спробуйте безкоштовно — реєстрація не потрібна
Відкрити генератор CSS-завантажувачів →Коли використовувати CSS-завантажувачі
Індикатори завантаження покращують сприйняття продуктивності та задоволеність користувачів у багатьох типових сценаріях.
- Завантаження даних з API — показуйте спінер, поки застосунок завантажує дані з сервера, щоб користувачі знали, що інтерфейс реагує та працює
- Надсилання форм — відображайте завантажувач після натискання кнопки відправки, щоб вказати, що запит обробляється, та запобігти подвійним клікам
- Переходи між сторінками — використовуйте завантажувач під час зміни маршрутів в односторінкових застосунках для згладжування переходу між вмістом
Поширені запитання
Чи кращі CSS-завантажувачі за GIF-спінери?
Так, у більшості випадків. CSS-завантажувачі є векторними, тому залишаються чіткими на дисплеях Retina, зазвичай мають менше 1 КБ коду і можуть бути налаштовані за допомогою CSS-змінних без створення нових файлів зображень. GIF-спінери є растровими зображеннями, які можуть виглядати розмитими на екранах з високою роздільною здатністю та додають додаткові HTTP-запити.
Чи працюють CSS-завантажувачі у всіх браузерах?
Сучасні CSS-анімації та ключові кадри підтримуються у всіх поточних браузерах, включаючи Chrome, Firefox, Safari та Edge. Згенерований код використовує стандартні CSS-властивості без вендорних префіксів, які більше не потрібні для підтримки анімацій.
Як відцентрувати CSS-завантажувач на сторінці?
Використовуйте CSS Flexbox або Grid на батьківському контейнері. Встановіть для батьківського елемента display flex з align-items center та justify-content center і задайте йому висоту (наприклад, 100vh для повносторінкових завантажувачів). Елемент завантажувача буде ідеально відцентрований як горизонтально, так і вертикально.