載入與等待回饋
Loading 不能只放一個轉圈圈。
等待時，使用者想知道的可能是「系統還在動嗎？」「大概還有多少？」「資料會長在哪裡？」或「到底哪一區暫時不能碰？」先回答這些，再選元件。
選擇流程
先判斷等待資訊，別急著放動畫。
- 有可靠的完成比例嗎？有：選 Progress Bar；數字必須跟真實工作同步。
- 初次載入的內容已有固定結構嗎？有：選 Skeleton；先保留資料表、清單或卡片的版面。
- 只有一個區域不能操作嗎？是：選 Loading Overlay；遮罩只覆蓋那張卡或那個工作區。
- 工作正在進行但尚無法估算嗎？短暫局部等待用 Spinner；較長的線性等待用 Indeterminate Progress。
差異對照
每一種等待，都要留下剛好的線索。
點選欄位名稱可進入元件閱讀路徑、實際 Demo 與可複製 AI Prompt。
| 判斷面向 | Spinner旋轉載入指示器 | Progress Bar進度列 | Skeleton骨架載入 | Loading Overlay載入遮罩 | Indeterminate Progress不定進度列 |
|---|---|---|---|---|---|
| 先問什麼 | 這是短暫局部等待嗎？ | 能可靠算出完成比例嗎？ | 初次載入已有固定結構嗎？ | 哪一個區域暫時不能操作？ | 工作確實在進行但完成度未知嗎？ |
| 最適合的情境 | 重新整理一小段資料、短操作回應。 | 匯入、上傳、已知工作量的處理。 | 資料表、清單、卡片的初次載入。 | 重新計算一張設定卡或局部工作區。 | 同步或搜尋正在進行，暫時沒有總量。 |
| 使用者看見什麼 | 正在處理的文字與旋轉指示。 | 任務名稱、真實數字與進度長度。 | 接近最終版面的中性結構。 | 局部遮罩、處理文字與 Spinner。 | 移動中的線性指示與「尚未可預估」。 |
| 百分比規則 | 不顯示。 | 必須和真實進度同步。 | 不顯示。 | 取決於遮罩裡的載入元件。 | 不得顯示假百分比，也不設定 aria-valuenow。 |
| 不適合的情況 | 長時間、可計算或有既定版型的等待。 | 只有正在處理、沒有可靠比例的工作。 | 按鈕、輸入欄位、選單與整個對話框。 | 整頁都被鎖住，卻說不清哪一段不能動。 | 已取得總量與完成比例的工作。 |
| 完成或失敗時 | 停止轉動並回報結果或重試。 | 完成後換成結果，失敗停在最後可信值。 | 改成資料、空狀態或錯誤狀態。 | 一定解除遮罩並留下結果或重試。 | 停止動態並改成結果，或切換為一般進度列。 |
示範情境
同一個後台，不同的等待資訊。
LumenDesk 重新整理成員時只需要 Spinner；匯入 24 位成員時顯示真實 Progress Bar；初次排程清單用 Skeleton；重新計算權限時只遮罩矩陣卡；同步外部目錄卻還不知道總量時，才用 Indeterminate Progress。
查看 Spinner Demo →