Генератор CSS-лоадерів

Що таке Генератор CSS-лоадерів?

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

Як користуватися Генератор CSS-лоадерів

1. Виберіть стиль лоадера: спінер, кільце, крапки, смуги або пульс.
2. Задайте розмір у пікселях і виберіть колір за допомогою зразка або ввівши значення.
3. Задайте швидкість анімації в секундах для одного повного циклу.
4. Відкрийте «Налаштування», щоб змінити товщину обведення (спінер і кільце) або кількість крапок чи смуг.
5. Спостерігайте за анімацією в живому попередньому перегляді, потім скопіюйте згенеровані HTML і CSS кнопкою копіювання.

Приклади

Стиль: спінер, розмір 48px, колір #4f86f7, швидкість 1s, товщина 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Стиль: крапки, розмір 48px, колір #9333ea, швидкість 1s, кількість 3

<div class="dd-loader"><div></div><div></div><div></div></div> зі зміщеним animation-delay, щоб крапки масштабувалися хвилею.

Поширені запитання

Які стилі лоадерів доступні?

Пʼять: спінер (дуга, що обертається), кільце (товще кільце, що обертається), крапки (крапки, що масштабуються хвилею), смуги (смуги, що розтягуються вгору й вниз) та пульс (одне пульсуюче коло). Перемикайтеся через меню стилів, і попередній перегляд та код оновлюються миттєво.

Що роблять елементи керування розміром, кольором і швидкістю?

Розмір задає розміри лоадера в пікселях, колір задає основний колір (скористайтеся палітрою або введіть будь-який CSS-колір), а швидкість — це тривалість одного циклу анімації в секундах. Товщина керує обведенням спінера й кільця, а кількість — скільки крапок або смуг відображається.

Згенерований CSS — це чистий CSS без JavaScript?

Так. Фрагмент — це звичайний HTML плюс блок <style> з використанням CSS-анімації та @keyframes, тож він працює без будь-якого JavaScript чи зовнішньої бібліотеки. Вставте його на сторінку, і він працює сам по собі.

Чому товщина й кількість змінюють не кожен стиль?

Товщина впливає лише на спінер і кільце (які малюють рамку), а кількість впливає лише на крапки та смуги (які відображають кілька елементів). Решта стилів їх ігнорують, тож вивід залишається чистим для обраного вами стилю.

Чи завантажується щось на сервер?

Ні. Лоадер та його CSS створюються цілком у вашому браузері за допомогою локальних операцій із рядками — жодні налаштування, кольори чи код ніколи не надсилаються на сервер, тож він працює офлайн і зберігає вашу роботу приватною.