线性进度指示器
不确定进度
该进度条用于无法得知准确进度值的情况。
Example
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>
确定进度
该进度条用于可以知道准确进度值的情况。
修改 <div class="mdui-progress-determinate"></div>
元素的 CSS 样式的 width
的值,即可更新进度。
Example
<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
的值相等。
Example
<div class="mdui-spinner"></div>
Example
<div class="mdui-spinner mdui-spinner-colorful"></div>
动态生成的圆形进度指示器
如果你的圆形进度条组件是动态生成的,则需要调用 mdui.mutation()
进行初始化。
如果需要修改已有圆形进度条组件,则需要调用 mdui.updateSpinners()
方法来重新初始化组件。该方法可以接受一个含 .mdui-spinner
类的 CSS 选择器、或者 DOM 元素、或者 DOM 元素组成的数组作为参数,表示只重新初始化指定的圆形进度条。如果没有传入参数,将重新初始化页面中的所有圆形进度条。
CSS 类名列表
类名 |
效果 |
.mdui-progress |
定义一个线性进度指示器。 |
.mdui-progress-indeterminate |
不确定进度的线性进度指示器。 |
.mdui-progress-determinate |
确定进度的线性进度指示器。 |
.mdui-spinner |
定义一个圆形进度指示器。 |
.mdui-spinner-colorful |
彩色的圆形进度指示器。 |