New We are sorting MAX channels into categories and territories. Read the news

🪄 Трюк: «Скелетон» без JS



При загрузке данных часто ставят Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!

.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. Меняете на реальные данные после загрузки.

Плюсы:

- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».

👉 @frontend_1
Views: 713
Open in MAX Report an inaccuracy

Report an inaccuracy

Describe what needs fixing. If you have a source, add a link.

You are leaving datool.ru

The link leads to an external website. datool.ru is not responsible for its content — check the address before entering passwords or payment details.

Redirecting in 10 s

Go