Skip to main content
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.

Komponen kerangka menampilkan tata letak placeholder saat konten dimuat, memberikan umpan balik visual dan meningkatkan kinerja yang dirasakan. Dibangun dengan HTML semantik dan animasi pulsa, layar kerangka mencegah perubahan tata letak dan menetapkan ekspektasi pengguna. Sistem kerangka Frutjam mendukung berbagai bentuk dan ukuran—ideal untuk pratinjau konten, pemuatan progresif, dan degradasi yang baik.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
skeletonBasisBlok placeholder yang berdenyut
skeleton-circleGayaBentuk kerangka melingkar
skeleton-textGayaAnimasi berkilau diterapkan pada teks yang terlihat

Penggunaan Dasar

<div class="skeleton h-32 w-32"></div>

<div className="skeleton h-32 w-32"></div>

Bentuk Kerangka

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>

Kartu Kerangka

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>

Daftar Kerangka

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>

Avatar Kerangka

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

Kartu Profil Kerangka

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>

Artikel Kerangka

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>

Teks Kerangka

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