基于 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

进度条