Yer tutucu kullanıcı arayüzü için yalnızca CSS Tailwind CSS iskelet yükleyicisi. Darbe animasyonlu daire, dikdörtgen ve metin çizgisi şekilleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
İskelet bileşenleri, içerik yüklenirken yer tutucu düzenleri görüntüleyerek görsel geri bildirim sağlar ve algılanan performansı artırır. Anlamsal HTML ve darbeli animasyonlarla oluşturulan iskelet ekranlar, düzen değişikliklerini önler ve kullanıcı beklentilerini belirler. Frutjam iskelet sistemi birden fazla şekil ve boyutu destekler; içerik önizlemesi, aşamalı yükleme ve zarif bozulma için idealdir.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| skeleton | Temel | Darbeli yer tutucu blok |
| skeleton-circle | Stil | Dairesel iskelet şekli |
| skeleton-text | Stil | Görünür metne ışıltılı animasyon uygulandı |
Temel Kullanım
<div class="skeleton h-32 w-32"></div> |
<div className="skeleton h-32 w-32"></div> |
İskelet Şekilleri
1 2 3 4 5 6 7 | <div class="skeleton skeleton-circle h-12 w-12"></div> <div class="skeleton h-12 w-12"></div> <div class="skeleton h-12 w-12"></div> <div class="skeleton h-4 w-12"></div> |
İskelet Kartı
1 2 3 4 5 6 7 8 9 10 11 | <div class="card card-outline w-96"> <figure class="skeleton h-64"></figure> <div class="card-content"> <h2 class="skeleton h-4 w-28"></h2> <p class="skeleton h-3 w-full"></p> <p class="skeleton h-3 w-full"></p> <div class="card-actions justify-end"> <div class="skeleton h-8 w-24"></div> </div> </div> </div> |
İskelet Listesi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="space-y-2"> <div class="flex items-center gap-3"> <div class="skeleton h-10 w-10 rounded-full shrink-0"></div> <div class="flex flex-col gap-2 flex-1"> <div class="skeleton h-3 w-20"></div> <div class="skeleton h-3 w-full"></div> </div> </div> <div class="flex items-center gap-3"> <div class="skeleton h-10 w-10 rounded-full shrink-0"></div> <div class="flex flex-col gap-2 flex-1"> <div class="skeleton h-3 w-20"></div> <div class="skeleton h-3 w-full"></div> </div> </div> </div> |
İskelet Avatarı
1 2 3 | <div class="avatar"> <div class="skeleton skeleton-circle h-12 w-12"></div> </div> |
İskelet Profil Kartı
1 2 3 4 5 6 7 8 9 10 | <div class="flex w-52 flex-col gap-4"> <div class="flex items-center gap-4"> <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div> <div class="flex flex-col gap-4"> <div class="skeleton h-4 w-20"></div> <div class="skeleton h-4 w-28"></div> </div> </div> <div class="skeleton h-32 w-full"></div> </div> |
İskelet Makalesi
1 2 3 4 5 6 | <div class="flex w-52 flex-col gap-4"> <div class="skeleton h-32 w-full"></div> <div class="skeleton h-4 w-28"></div> <div class="skeleton h-4 w-full"></div> <div class="skeleton h-4 w-full"></div> </div> |
İskelet Metni
<span class="skeleton skeleton-text">AI is thinking...</span> |
Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?
Cherry MCP, AI editörünüze talep üzerine tam İskelet sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.