← ToolBox / 骨架屏生成器

💀 Skeleton Loader Generator

📐 計算公式 / 原理

骨架屏 = 佔位色塊（列表 / 卡片 / 圖文）疊加 shimmer 流光動畫（背景位移動畫）；配置圓角、間距與閃爍後匯出 CSS，用於載入佔位。

型別

基礎色

高亮色

動畫速度 (秒)

圓角 (px)

預覽

📚 深度解析：骨架屏生成器

生成卡片骨架

輸入：圓角塊、微光動畫。處理：組合佔位塊。輸出：CSS 與預覽。

和 spinner 區別？: 骨架屏模擬內容結構，比轉圈更能降低等待焦慮。
什麼時候用？: 內容載入預期長時用骨架屏；極短載入用 spinner 即可。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

⚠️ 使用說明與注意事項

📖關於「骨架屏生成器」 ▼

Configure list, card or media skeleton placeholders with adjustable radius, spacing and shimmer, and export the CSS.