---
title: "骨骼"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-30
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "仅 CSS 的 Tailwind CSS 骨架，带有动画占位符。文本、头像、卡片和图像形状，可实现流畅的感知性能和加载状态。"
url: https://frutjam.com/zh-hans/components/skeleton
---

# 骨架组件

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.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class           | Type  | Description                               |
| --------------- | ----- | ----------------------------------------- |
| skeleton        | Base  | Pulsing placeholder block                 |
| skeleton-circle | Style | Circular skeleton shape                   |
| skeleton-text   | Style | Shimmer animation applied to visible text |

## Basic Usage

## Skeleton Shapes

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

## Skeleton Card

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

## Skeleton List

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

## Skeleton Avatar

```html
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>
```

## Skeleton Profile Card

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

## Skeleton Article

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

## Skeleton Text

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