Chuyển đến nội dung chính
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.

Skeleton components display placeholder layouts while content is loading, providing visual feedback and improving perceived performance. Built with semantic HTML and pulse animations, skeleton screens prevent layout shifts and set user expectations. The Frutjam skeleton system supports multiple shapes and sizes—ideal for content preview, progressive loading, and graceful degradation.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
skeletonCăn cứPulsing placeholder block
skeleton-circlePhong cáchCircular skeleton shape
skeleton-textPhong cáchHoạt ảnh lung linh được áp dụng cho văn bản hiển thị

Cách sử dụng cơ bản

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

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

Hình dạng bộ xương

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>

Thẻ bộ xương

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>

Danh sách bộ xương

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 bộ xương

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

Thẻ hồ sơ bộ xương

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>

Bài viết về bộ xương

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>

văn bản bộ xương

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