基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

進度條

進度條包括線性進度條和環形進度條。

呼叫方式

線性進度條使用純 CSS 編寫，只需編寫 HTML 程式碼即可生效。

環形進度條在頁面載入完成後自動初始化。對於動態產生的環形進度條，需要呼叫 mdui.mutation() 進行初始化。

色彩

線性進度條使用主色。

環形進度條使用主色或彩色。

線性進度條

不確定進度

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

範例

<div class="mdui-progress">
  <div class="mdui-progress-indeterminate"></div>
</div>

確定進度

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

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

範例

<div class="mdui-progress">
  <div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>

環形進度條

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

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

單色

範例

<div class="mdui-spinner"></div>

彩色

範例

<div class="mdui-spinner mdui-spinner-colorful"></div>

動態產生的環形進度條

如果您的環形進度條元件是動態產生的，則需要呼叫 mdui.mutation() 進行初始化。

如果需要修改已有環形進度條元件，則需要呼叫 mdui.updateSpinners() 方法來重新初始化元件。該方法可以接受一個 CSS 選取器（該選取器應包含類別名稱 .mdui-spinner）、DOM 元素或者由 DOM 元素組成的陣列作為參數，表示只重新初始化指定的環形進度條。如果沒有傳入參數，將重新初始化頁面中的所有環形進度條。

CSS 類別清單

類別名稱	說明
`.mdui-progress`	定義一個線性進度條。
`.mdui-progress-indeterminate`	不確定進度的線性進度條。
`.mdui-progress-determinate`	確定進度的線性進度條。
`.mdui-spinner`	定義一個環形進度條。
`.mdui-spinner-colorful`	彩色的環形進度條。

選單

Collapse

進度條