Skip to content

Spin 加載中

加載中組件用於在頁面或區塊加載過程中顯示動畫效果,提示用戶等待。

基本用法

基本的加載中組件,有三種尺寸可選。

帶有描述文字

使用 description 屬性可以添加描述文字。

加載中...
正在處理...

自定義顏色

使用 stroke 屬性可以自定義加載圖標的顏色。

包裹內容

可以將 Spin 組件作為容器包裹其他元素,當 show 屬性為 true 時,顯示加載動畫並遮罩內容。

這是一個包含內容的 Spin 組件示例

當 Spin 處於活動狀態時,內容將被遮罩

延遲顯示

使用 delay 屬性可以設置延遲顯示加載效果的時間(毫秒),適用於防止閃爍。

這個示例設置了 500ms 的延遲

短時間的加載過程不會顯示加載動畫,避免閃爍

API

屬性

屬性名說明類型默認值
size組件大小,可選值為 smallmediumlarge 或數字string | numbermedium
description描述文字string-
rotate是否旋轉動畫booleantrue
show是否顯示加載中組件booleantrue
stroke加載圖標的顏色string-
strokeWidth加載圖標的線條寬度number2
delay延遲顯示加載效果的時間(毫秒)number0

事件

事件名說明回調參數
update:showshow 屬性變化時觸發(value: boolean)

插槽

插槽名說明
default自定義內容,當有默認插槽時,Spin 將作為包裹容器
icon自定義加載圖標
description自定義描述文字

Released under the MIT License.