---
title: "Skeleton"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Skeleton with animated placeholders. Text, avatar, card, and image shapes for smooth perceived performance and loading states."
url: https://frutjam.com/zh-hant/components/skeleton
---

# Skeleton Component

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

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

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

## 基本用法

## 骨架形狀

```html
<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
<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
<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
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>
```

## 骷髏檔案卡

```html
<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
<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>
```

## 骨架文字

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