Spin 載入

Spin 是區塊載入指示：可單獨顯示品牌轉圈，或在內容上蓋一層柔白遮罩。Button 的載入與 Message 的載入共用同一種描邊；區塊遮罩由 Spin 負責。

示範

尺寸

直徑為 sm 18、md 28、lg 40。描邊寬度 2 / 2.5 / 3。軌道是 25% 品牌色，頂端為實心品牌色，0.75 秒轉一圈。

sm 18

md 28

lg 40

<gk-spin size="sm"></gk-spin>
<gk-spin size="md" description="載入中…"></gk-spin>
<gk-spin size="lg" description="正在取得資料"></gk-spin>

包覆內容

有子內容且 show 時，遮罩為 color-mix(#fff 55%, transparent)。內容仍佔位，但沒有 pointer events。

課程詳情

內容在載入時仍佔位，但不可互動。

<gk-spin description="載入中…">
  <article>
    <h3>課程詳情</h3>
    <p>內容在載入時仍佔位，但不可互動。</p>
  </article>
</gk-spin>

閒置

:show="false" 或 show="false" 會隱藏遮罩。spinning 是 show 的別名。

已載入完成

轉圈已隱藏，按鈕可以按。

繼續

<gk-spin show="false">
  <p>遮罩已隱藏，按鈕可以按。</p>
  <gk-button>繼續</gk-button>
</gk-spin>

延遲

delay 是出現轉圈前的毫秒數。若 show 先結束，就不會閃一下。300–500ms 可避免極短請求的閃爍。預設為 0。

遮罩會等 400ms。在那之前關掉就不會出現。

400ms 後顯示隱藏

<gk-spin :show="delayed" delay="400" description="載入中…">
  <p>極短的請求不會閃一下。</p>
</gk-spin>

對話框頁尾的巢狀載入請看 Modal 對話框。按鈕內的轉圈是 Button 按鈕 的 loading，不是 Spin。

API

Spin 屬性

屬性	型別	預設
show	boolean	true
spinning	boolean	show 的別名
size	'sm' | 'md' | 'lg'	'md'
description	string	''
tip	string	description 的別名
delay	number	0
stroke-width	number	依尺寸 2 / 2.5 / 3

文件以 show 與 description 為準。v1 沒有事件。

Spin 插槽

名稱	說明
預設	載入時要蓋住的內容，可省略

CSS Parts

Part	說明
container	定位遮罩。載入中為 aria-busy
content	子內容
mask	柔白遮罩。只在蓋住內容時出現
spinner	狀態即時區域與轉圈
tip	說明文字；沒有說明時為視覺隱藏的「載入中」/ “Loading”

無障礙

• 轉圈可見時，容器為 aria-busy="true"，spinner 為 role="status" 且 aria-live="polite"。
• 朗讀文字是 description / tip。沒有文字時，文件語言以 zh 開頭為「載入中」，否則為 “Loading”。
• 閒置時移除 busy，spinner 為 aria-hidden。
• 若 show 在 delay 結束前關掉，狀態不會暴露給輔助科技。