Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Skeleton Component

CSS-only Tailwind CSS skeleton loader for placeholder UI. Circle, rectangle, and text line shapes with pulse animation. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

İ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
skeletonTemelDarbeli yer tutucu blok
skeleton-circleStilDairesel iskelet şekli
skeleton-textStilGö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

html 
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ı

html 
 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

html 
 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ı

html 
1
2
3
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>

İskelet Profil Kartı

html 
 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

html 
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

AI is thinking...
html 
<span class="skeleton skeleton-text">AI is thinking...</span>