Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Kerangka

Terakhir diperbarui:

Pemuat kerangka Tailwind CSS khusus CSS untuk UI placeholder. Bentuk lingkaran, persegi panjang, dan garis teks dengan animasi pulsa. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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

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

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Kerangka yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP