狀態與回饋系統
載入指示組
四款載入指示 React 元件：圓環、圓點、長條與品牌標誌描邊循環，可調尺寸、速度與標籤，減少動態偏好時改為靜態圖示加文字。
一個元件涵蓋四種常用的載入指示：等速旋轉的圓環、依序上浮的三點、高低起伏的長條，以及沿品牌曲線來回描邊的標誌。圖形預設繼承文字色，放進按鈕、表格列或整頁載入區都能直接跟上周圍的配色；標籤預設只給螢幕閱讀器，也可以改成顯示在圖形旁。使用者開啟「減少動態效果」時所有循環停止，改顯示靜態圖示並強制露出文字。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add spinner-setPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.8
編輯中的呼叫預設屬性
<SpinnerSet/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/spinner-set.json或在 components.json 設定 registries 後，改用 @webberui/spinner-set 安裝。
使用
import { SpinnerSet } from "@/components/ui/spinner-set";
<SpinnerSet />
<SpinnerSet variant="dots" size="lg" showLabel label="正在同步" />
<SpinnerSet variant="brand" size={32} speed={2} />
<button type="button" aria-busy={saving} disabled={saving}>
{saving ? <SpinnerSet size="xs" label="儲存中" /> : null}
儲存
</button>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "ring" | "dots" | "bars" | "brand" | "ring" | 指示樣式：圓環、三點、長條或品牌標誌描邊 |
size | "xs" | "sm" | "md" | "lg" | number | "md" | 邊長：xs 12px、sm 16px、md 20px、lg 28px，或直接給像素數字 |
label | string | "載入中" | 載入文字；預設只給螢幕閱讀器 |
showLabel | boolean | false | 在圖形旁顯示 label 文字 |
speed | number | 依變體 | 循環一次的秒數；ring 0.8、dots 1.2、bars 1.0、brand 1.6，給值後四款共用 |
color | string | currentColor | 圖形顏色；未提供時讀 --wb-spinner-set-color，再退回 currentColor |
brandPath | string | WebberUI 品牌曲線 | brand 變體描邊用的 SVG path（64×64 座標系） |
className | string | — | 透傳到最外層容器 |
另外匯出型別 SpinnerSetVariant 與 SpinnerSetSize。
細節
- 圓環是一個 25% 透明的完整圓加一段 25% 長的弧，弧長以
pathLength=100表達，換尺寸不必重算。 - 三點每點延遲 speed/6、長條每條延遲 speed/8，所以調整
speed時節奏比例不變。 - brand 變體以
pathLength0→1→0 來回描邊；描邊粗細依尺寸自動加粗，12px 時仍看得清楚。 - 根元素會寫入
--wb-spinner-set-duration（等於 speed 秒數），方便你在外部 CSS 讓其他動畫跟同一個節奏。 - 顏色變數
--wb-spinner-set-color可在主題或父層設定；傳入colorprop 時以 prop 為準。
可及性
- 根元素為
role="status"、aria-live="polite"，label文字位於其中，螢幕閱讀器會朗讀載入狀態 - 圖形本身設
aria-hidden，不會被朗讀成多餘的圖片或形狀 - 放進按鈕時，請在按鈕上設定
aria-busy並停用，避免重複送出 - 使用者系統開啟「減少動態效果」時，所有循環停止：ring 改為靜態 Loader 圖示、dots 與 bars 顯示靜態三點與四條、brand 顯示完整描好的標誌，並強制顯示 label 文字