Генератор CSS-завантажувачів

Що це за інструмент?

CSS-завантажувач — це невеликий анімований елемент: обертове кільце, кульки, що підстрибують по черзі, пульсуюче коло чи смуга прогресу, що рухається — використовується, щоб показати, що контент завантажується, без циклу анімації на JavaScript і без зображення чи GIF. Він побудований із кількох правил CSS плюс блоку @keyframes, який визначає, як елемент рухається з часом.

Цей інструмент генерує чотири поширені шаблони завантажувачів із реальним робочим CSS: обертовий спінер на основі рамки, три кульки, що по черзі підстрибують, коло, що пульсує туди-сюди, та смугу з рухомим заповненням. Налаштуйте розмір, колір і тривалість анімації на живому прикладі, а потім скопіюйте згенерований CSS і мінімальний HTML-елемент, до якого він застосовується.

Джерело: CSS Animations Level 1, W3C — специфікація, що визначає @keyframes і властивості анімації, з яких побудовані ці завантажувачі.

Навіщо його використовувати?

• Живий приклад анімується в реальному часі при зміні стилю, розміру, кольору чи швидкості — ви бачите точно те, що використовуватимете.
• Генерує повний CSS, включно з блоком @keyframes, а не лише фрагмент, який потрібно доробляти самостійно.
• Також видає точну HTML-розмітку, яку очікує CSS, тож не доведеться вгадувати назви класів чи структуру елементів.
• Чотири різні шаблони анімації (спінер, кульки, пульсація, смуга) покривають найпоширеніші сценарії стану завантаження.
• Чиста CSS-анімація — без JavaScript, без файлів зображень, легша й плавніша за анімований GIF.
• Працює повністю у вашому браузері, безкоштовно, без реєстрації.

Як користуватися

1. Оберіть стиль завантажувача: обертове кільце, кульки, що підстрибують, пульсуюче коло або смугу прогресу.
2. Перетягніть повзунок розміру, щоб збільшити чи зменшити завантажувач.
3. Виберіть колір — він стане акцентним кольором завантажувача (обертова рамка, кульки або заповнення смуги).
4. Налаштуйте швидкість, щоб зробити анімацію швидшою чи повільнішою; більшість завантажувачів інтерфейсу найкраще читаються при 0,6–1,5 секунди на цикл.
5. Скопіюйте згенерований CSS у свою таблицю стилів і вставте фрагмент HTML там, де потрібно показати завантажувач.

Приклад

Введення

Стиль: обертове кільце · Розмір: 40px · Колір: помаранчевий · Швидкість: 1,0с

Результат

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Класичний кільцевий спінер: коло з майже прозорою рамкою з трьох боків і суцільним кольором з четвертого, що безперервно обертається з лінійною безкінечною анімацією.

Чому CSS-завантажувачі кращі за анімовані GIF

Анімовані GIF-спінери роками були стандартом за замовчуванням, але сьогодні CSS-завантажувач майже завжди кращий вибір: це кілька сотень байтів тексту замість бінарного файлу зображення, він масштабується до будь-якого розміру без пікселізації, оскільки малюється рамками й трансформаціями, а його колір можна миттєво змінити однією CSS-змінною замість повторного експорту нового зображення.

Чотири стилі тут — спінер, кульки, пульсація, смуга — це також ті, що найчастіше зустрічаються в реальних інтерфейсах, від станів завантаження кнопок до накладок на всю сторінку. Кожен використовує в keyframes лише зміни transform і opacity, які браузери можуть плавно анімувати на GPU, не гальмуючи решту сторінки.

Вибір стилю під ситуацію

• Обертове кільце: найнейтральніший, універсальний варіант — добре працює всередині кнопок і невеликих вбудованих станів завантаження.
• Кульки, що підстрибують: читається легше й грайливіше; часто використовується для індикаторів 'друкує...' у чатах і коротких очікувань.
• Пульсуюче коло: підходить для одиничного індикатора завантаження або як точка статусу 'активно/наживо'.
• Смуга прогресу: натякає на прогрес уперед і зазвичай очікується для завантаження сторінок чи багатоетапних процесів, навіть без точного відсотка.

Використання завантажувача у вашому проєкті

Вставте згенерований CSS у свою таблицю стилів один раз, а потім повторно використовуйте HTML-фрагмент будь-де, де потрібен стан завантаження — всередині кнопки під час надсилання форми, поверх картки під час отримання даних, або по центру накладки на всю сторінку. Оскільки анімація на чистому CSS, увімкнути й вимкнути її так само просто, як додати чи видалити елемент з DOM, або приховати його за допомогою display: none.

→ Генератор box-shadow · CSS Мінімізатор

Часті запитання