TGViewer
CodeBase | Frontend CodeBase | Frontend @codebase_frontend · 1.93K subscribers
Post #1249 62
🪄 Трюк: «Скелетон» без 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 → выглядит «дорого».

CodeBase | Frontend | #вебдизайн
  • ❤ 1
More from @codebase_frontend
  1. Oct 13, 2026🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер 15 октября в 19:00 (МСК)…
  2. Oct 12, 2026Совет по CSS 💡 Используйте табличные цифры для отображения таймеров ✅ https://www.codewit…
  3. Oct 11, 2026Работа в Т‑Банке — топ‑3 лучших работодателей России по версии Forbes. Приходите работать…
  4. Oct 10, 2026Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯 Современные браузеры уже поддерж…
  5. Oct 10, 2026Напоминаем про наш секретный второй ресурс тут тонны крутых постов, которых вы здесь точно…
  6. Oct 7, 2026💡 HTML Tip: Скачивание файлов одной строкой Хочешь, чтобы пользователь скачивал файл по к…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →