Загружаем изображение…
🪄 Трюк: «Скелетон» без 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
Просмотры: 663
Открыть в MAX Сообщить о неточности

Сообщить о неточности

Опишите, что нужно исправить. Если есть источник, добавьте ссылку.

Вы покидаете datool.ru

Ссылка ведёт на внешний сайт. datool.ru не отвечает за его содержимое — проверьте адрес, прежде чем вводить пароли или платёжные данные.

Переход через 10 с

Перейти