Skeleton
Installation
import { Skeleton } from "@olab/components";Overview
內容載入前的佔位塊：一塊淡底，預設帶一道由左往右掃過的微光。形狀、尺寸、圓角都由 className 決定，元件本身沒有預設大小。
用多個 Skeleton 排出跟真實內容差不多的輪廓，載入完成後換成真內容，畫面不會跳動。
Interactive Demo
TOGGLE animated — shimmer effect on/off
State Matrix
SHAPE × ANIMATION — no interaction states
bar — h-4 w-full
block — h-10 w-60 rounded-md
circle — h-16 w-16 rounded-full
static — animated=false
Examples
CARD PLACEHOLDER — multiple skeletons standing in for a card
Spec
| Part | Value | Source class |
|---|---|---|
| Fill | 極淡底（dark 白 4% / light 黑 4%） | background: var(--color-skeleton-bg) |
| Shimmer | 92° 漸層微光，1.5s 循環 | after:animate-skeleton-loading · --color-skeleton-highlight |
| Size / radius | 沒有預設，全由 className 決定 | className |
| Static | animated=false 時只留淡底 | animated |
數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/skeleton.md。
Usage
Do
- 列表、卡片、表格第一次載入時，用跟真內容同尺寸的 Skeleton 排出輪廓。
- 文字行用矮長條（h-4），頭像用圓形，按鈕用膠囊形。
- 同一區塊的 Skeleton 一起出現、一起被真內容取代。
Don't
- 已經有資料、只是在更新時不要換回 Skeleton；讓舊內容留著，例如 Table 的 loading 只會變淡。
- 不要幫 Skeleton 上色或加邊框；它應該安靜地退在背景。
- 等待時間很短（不到半秒）時不用放，閃一下反而更亂。
Links
- Measured spec
- live-ds-spec/skeleton.md