進度指示器

.mdui-spinner-colorful進度指示器包括線性進度指示器和圓形進度指示器。

調(diào)用方式

線性進度指示器使用純 CSS 編寫，編寫 HTML 代碼即可生效。

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

色彩

線性進度指示器使用主色。

圓形進度指示器使用主色或彩色。

相關(guān)資料

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

線性進度指示器

不確定進度

該進度條用于無法得知準確進度值的情況。

在線運行

確定進度

該進度條用于可以知道準確進度值的情況。

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

在線運行

圓形進度指示器

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

可以修改 .mdui-spinner 類的 width 和 height 樣式值來修改圓形進度條的大小，但需要保證 width 和 height 的值相等。

單色

在線運行

彩色

在線運行

動態(tài)生成的圓形進度指示器

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

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

CSS 類名列表