跳至主要內容
Frutjam logo Frutjam
v2.2.5
Theme

骨架元件

最後更新:

純 CSS Tailwind CSS 骨架載入器，用於佔位符 UI。帶有脈衝動畫的圓形、矩形和文字線形狀。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

骨架元件在內容載入時顯示佔位符佈局，提供視覺回饋並提高感知效能。骨架螢幕採用語義 HTML 和脈衝動畫構建，可防止佈局變更並設定使用者期望。 Frutjam 骨架系統支援多種形狀和尺寸，非常適合內容預覽、漸進加載和優雅降級。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
skeleton根據脈衝佔位符塊
skeleton-circle風格圓形骨架形狀
skeleton-text風格應用於可見文字的微光動畫

基本用法

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

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

骨架形狀

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>

骷髏卡

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>

骷髏列表

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>

骷髏頭像

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

骷髏檔案卡

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>

骨架文章

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>

骨架文字

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

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 骨骼 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP