Спиннер утомляет.

Современный интерфейс показывает скелетон, который создаёт ощущение скорости. И его можно сделать чистым CSS, без единой строки JavaScript.
Создайте класс:
.skeleton
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
@keyframes shimmer
100% background-position: -200% 0;
Как использовать.
1. Вставьте div с классом .skeleton на место будущего контента.
2. Задайте размеры под картинку, заголовок или абзац.
3. После загрузки данных замените скелетон реальными узлами.
Плюсы.
Меньше кода и зависимостей. Проще поддерживать. Легко адаптировать под карточки, аватарки, списки. Анимация «дорогая» на вид, но дешевая по усилиям.
Бонус. Скомбинируйте со свойствами prefers-reduced-motion и отключайте shimmer, если пользователь просит минимум анимации. Забота о доступности повышает лояльность аудитории.
👉 Нравятся такие практичные приёмы? На курсе мы собираем полный набор рабочих паттернов UI, от Skeleton до Skeleton-таблиц. Запишитесь и попробуйте вводные модули бесплатно.
Источник: https://vk.ru/wall-182420474_7166 #ITкурсы #курсыIT #ИТ #ИТкурсы #ITобразование #ИТобразование #IT #программирование #курсыИТ #информационныетехнологии