Skeleton loading — bu sahifa yoki kontent yuklanish vaqtida foydalanuvchiga sahifa strukturasini ko'rsatish texnikasi. Klassik loader (spinner) o'rniga sahifaning kelajak ko'rinishini kichik gray bloklar bilan ko'rsatish. Bu UX'da katta yaxshilanish — foydalanuvchi vaqt qisqaroq tuyiladi va sabrini saqlaydi. Facebook, LinkedIn, YouTube — barchasi skeleton loading ishlatadi.
Skeleton vs Spinner
Spinner — aylanuvchi loader, faqat \"yuklanmoqda\" signal. Foydalanuvchi nima yuklanayotganini bilmaydi.
Skeleton — sahifaning kelajak ko'rinishi. Foydalanuvchi nima ko'radi tushunadi.
UX research: skeleton bilan foydalanuvchi 30%+ kam frustration his etadi.
Skeleton qanday ishlaydi
Sahifa yuklanish boshida — kontent o'rniga kichik gray bloklar. Bloklar real kontent shaklida (sarlavha, rasm, matn).
Real kontent yuklangach — skeleton fade out va real kontent fade in.
Bu \"perceived performance\" — sahifa tezroq tuyiladi (real vaqt o'zgarmasa ham).
Skeleton dizayn
Bloklar: gray (#e0e0e0 yoki light gray). Border-radius modern (4-8px).
Shape: real kontent shakliga mos. Sarlavha — to'rtburchak, rasm — kvadrat, matn — bir nechta qator.
Animation: shimmer effect — light gradient o'ng tomondan chap tomonga harakat qiladi.
Skeleton CSS
Oddiy implementatsiya:
.skeleton {
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
Skeleton turlari
Card skeleton — har card uchun (e-commerce, blog).
List skeleton — list item'lar.
Article skeleton — blog post (sarlavha, paragraf'lar, rasm).
Avatar skeleton — circle.
Button skeleton — kichik bloklar.
Qachon ishlatish
Sahifa initial load (server data fetch).
List update (filter o'zgarish).
Lazy load image yoki content.
AJAX request davomida.
Qachon ishlatmaslik
Tezda yuklanadigan (less than 500ms) — skeleton ko'rinmaydi.
Spinner adequate bo'lsa (oddiy form submit).
Error state — skeleton emas, xato xabari.
Real loading vs perceived loading
Real loading — actual sahifa yuklash vaqti. Skeleton ta'sir qilmaydi.
Perceived loading — foydalanuvchi sezgan vaqt. Skeleton 30-40% kamaytiradi.
UX qaror: skeleton bilan real vaqt o'zgarmaydi, lekin foydalanuvchi tajriba yaxshilanadi.
Animation timing
Shimmer animation: 1-2 soniyada bir aylanish. Tez bo'lmasin (chalg'ituvchi), sekin bo'lmasin (statik tuyiladi).
1.5 soniya — ko'pchilik sayt'da ishlatiladi.
Skeleton vs Optimistic UI
Optimistic UI — foydalanuvchi action qilganda, natija darrov ko'rsatish (server response kelishini kutmasdan). Misol: like tugma bosilsa — darhol qizil bo'ladi.
Skeleton — loading davomida. Optimistic UI — action davomida.
Ikkalasi alohida texnika, lekin birga ishlatilishi mumkin.
Frameworks va libraries
React: react-loading-skeleton, react-content-loader.
Vue: vue-content-loader.
Pure CSS: oddiy keyframes animation.
Custom skeleton vs library
Custom: faqat sizning UI'ga moslangan, performance yaxshi.
Library: oson implementatsiya, ko'p case bor.
Strategiya: kichik UI uchun custom, katta uchun library.
Mobile skeleton
Mobile'da skeleton ayniqsa muhim — slow tarmoq, foydalanuvchi sabri kam.
Performance ehtiyot — skeleton animation CPU yedi. requestAnimationFrame ishlatish.
A/B test
Skeleton vs spinner: skeleton bilan bounce rate 10-20% pasayadi.
Skeleton vs blank page: skeleton bilan engagement 30%+ yuqori.
Common xato
1. Real kontent shaklidan farq — foydalanuvchi chalkashish.
2. Juda uzun davom etish (5+ soniya) — eng yaxshi UX emas. Real performance ham yaxshilash kerak.
3. Animation sekin yoki tez — uncomfortable.
4. Mobile'da animation jerky — CPU eb tashlash.
Skeleton va accessibility
Screen reader uchun: aria-hidden=\"true\" skeleton element'larga. Foydalanuvchi \"loading\" xabari olishi shart.
aria-live=\"polite\" — yangi kontent kelganda screen reader xabardor.
Sayt.uz va skeleton
Sayt.uz blog post sahifasida skeleton loading. Birinchi sahifa yuklanishida — sarlavha, hero image, paragraf'lar skeleton sifatida.
Mahsulot sahifalari: hero, narx, tavsifi skeleton.
Search results: card skeleton bilan natija qatorlari.
Shimmer animation 1.5s, custom CSS.
Performance kuzatuv: Core Web Vitals'da LCP 1.8s, lekin foydalanuvchi 1.2s deb tuyiladi (skeleton ta'siri).
Mobile bounce rate 12% (skeleton kiritilgandan keyin avval 18% edi). UX yaxshilanishi sezilarli.