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

Навіщо CSS-лоадери?

Стан завантаження є важливою частиною UX. Без індикатора завантаження користувач не знає, чи відбувається щось, і може закрити сторінку або натиснути кнопку повторно. CSS-лоадери не потребують зображень та JavaScript — вони легкі, завжди доступні та підтримуються в усіх браузерах.

Типи лоадерів

Спінер (обертовий елемент) — найпоширеніший тип. Пульсуючий кружечок — для фонових операцій. Прогрес-бар — для операцій з відомою тривалістю. Skeleton Screen — заповнювач форми контенту, що завантажується. Кожен тип передає різне повідомлення: спінер — «чекайте», скелетон — «структура відома, наповнення завантажується».

Анімований спінер на CSS

Класичний спінер: елемент з border, де один сегмент прозорий, з animation: spin 1s linear infinite та @keyframes spin { to { transform: rotate(360deg); } }. Для більш складних анімацій використовуйте SVG stroke-dashoffset анімацію — як у Material Design progress indicator.

Доступність лоадерів

Завжди додавайте role="status" та aria-label="Завантаження..." до контейнера лоадера. Включайте приховано текст <span class="sr-only">Завантаження</span> для скрінрідерів. Після завершення завантаження повідомте про це через aria-live регіон. Враховуйте prefers-reduced-motion для вимкнення анімацій.