.mdui-spinner-colorful進(jìn)度指示器包括線性進(jìn)度指示器和圓形進(jìn)度指示器。

調(diào)用方式

線性進(jìn)度指示器使用純 CSS 編寫(xiě)，編寫(xiě) HTML 代碼即可生效。

圓形進(jìn)度指示器在頁(yè)面加載完后自動(dòng)初始化，對(duì)于動(dòng)態(tài)生成的圓形進(jìn)度指示器，需要調(diào)用 mdui.updateSpinners() 進(jìn)行初始化。

色彩

線性進(jìn)度指示器使用主色。

圓形進(jìn)度指示器使用主色或彩色。

相關(guān)資料

Material Design 進(jìn)度指示器設(shè)計(jì)規(guī)范

線性進(jìn)度指示器

不確定進(jìn)度

該進(jìn)度條用于無(wú)法得知準(zhǔn)確進(jìn)度值的情況。

在線運(yùn)行

確定進(jìn)度

該進(jìn)度條用于可以知道準(zhǔn)確進(jìn)度值的情況。

修改 <div class="mdui-progress-determinate"></div> 元素的 CSS 樣式的 width 的值，即可更新進(jìn)度。

在線運(yùn)行

圓形進(jìn)度指示器

只需添加元素 <div class="mdui-spinner"></div> 即可生成圓形進(jìn)度條。添加類(lèi) .mdui-spinner-colorful 可生成彩色的圓形進(jìn)度條。

可以修改 .mdui-spinner 類(lèi)的 width 和 height 樣式值來(lái)修改圓形進(jìn)度條的大小，但需要保證 width 和 height 的值相等。

單色

在線運(yùn)行

彩色

在線運(yùn)行

動(dòng)態(tài)生成的圓形進(jìn)度指示器

如果你的圓形進(jìn)度條組件是動(dòng)態(tài)生成的，則需要調(diào)用 mdui.updateSpinners() 方法來(lái)重新初始化組件。

該方法可以接受一個(gè)含 .mdui-spinner 類(lèi)的 CSS 選擇器、或者 DOM 元素、或者 DOM 元素組成的數(shù)組作為參數(shù)，表示只重新初始化指定的圓形進(jìn)度條。如果沒(méi)有傳入?yún)?shù)，將重新初始化頁(yè)面中的所有圓形進(jìn)度條。

CSS 類(lèi)名列表