Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần khung xương

Cập nhật lần cuối:

Trình tải khung CSS Tailwind chỉ có CSS ​​cho giao diện người dùng giữ chỗ. Hình dạng hình tròn, hình chữ nhật và dòng văn bản với hoạt ảnh xung. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Các thành phần Skeleton hiển thị bố cục giữ chỗ trong khi nội dung đang tải, cung cấp phản hồi trực quan và cải thiện hiệu suất cảm nhận. Được xây dựng bằng HTML ngữ nghĩa và hoạt ảnh xung, màn hình khung ngăn chặn sự thay đổi bố cục và đặt ra kỳ vọng của người dùng. Hệ thống khung Frutjam hỗ trợ nhiều hình dạng và kích cỡ — lý tưởng để xem trước nội dung, tải liên tục và xuống cấp nhẹ nhàng.

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

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

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Bộ xương chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP