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.