Skeleton 骨架屏

內容載入前的占位,長得像即將出現的內容。使用 Element Plus 的 el-skeleton。

設計準則

• 首次載入整塊內容用骨架屏;局部小更新用元件內建 loading;有真實進度用 Progress
• 骨架的形狀要貼近實際內容的版型(卡片 = 圖 + 標題 + 兩行),載入完成才不會跳版
• 一律開 animated,靜止的骨架像壞掉
• 骨架列數對齊實際內容,不要固定三條打發所有場景

基本用法

loading

動畫

loading

自訂版型(貼近實際內容)

loading

載入狀態切換

loading 為 false 時自動換成實際內容:

loading

Do / Don't

✅ Do	❌ Don't
骨架形狀貼近實際版型	千篇一律三條灰線
一律開 animated	靜止骨架像壞掉
首次整塊載入才用	按個按鈕也閃骨架

給工程師

完整 API 見 Element Plus Skeleton 文件。 本站規範優先於 EP 文件中的視覺建議。