进度指示器

2018-05-26 06:35 更新

.mdui-spinner-colorful进度指示器包括线性进度指示器和圆形进度指示器。

调用方式

线性进度指示器使用纯 CSS 编写,编写 HTML 代码即可生效。

圆形进度指示器在页面加载完后自动初始化,对于动态生成的圆形进度指示器,需要调用 mdui.updateSpinners() 进行初始化。

色彩

线性进度指示器使用主色。

圆形进度指示器使用主色或彩色。


相关资料

Material Design 进度指示器设计规范


线性进度指示器

不确定进度

该进度条用于无法得知准确进度值的情况。

www.mdui.org - 进度指示器 - 不确定进度

在线运行


确定进度

该进度条用于可以知道准确进度值的情况。

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

www.mdui.org - 进度指示器 - 确定进度

在线运行


圆形进度指示器

只需添加元素 <div class="mdui-spinner"></div> 即可生成圆形进度条。添加类 .mdui-spinner-colorful 可生成彩色的圆形进度条。

可以修改 .mdui-spinner 类的 width 和 height 样式值来修改圆形进度条的大小,但需要保证 width 和 height 的值相等。

单色

www.mdui.org - 进度指示器 - 单色圆形

在线运行


彩色

www.mdui.org - 进度指示器 - 彩色圆形

在线运行


动态生成的圆形进度指示器

如果你的圆形进度条组件是动态生成的,则需要调用 mdui.updateSpinners() 方法来重新初始化组件。

该方法可以接受一个含 .mdui-spinner 类的 CSS 选择器、或者 DOM 元素、或者 DOM 元素组成的数组作为参数,表示只重新初始化指定的圆形进度条。如果没有传入参数,将重新初始化页面中的所有圆形进度条。


CSS 类名列表

 类名  效果
 .mdui-progress 定义一个线性进度指示器。
 .mdui-progress-indeterminate 不确定进度的线性进度指示器。
 .mdui-progress-determinate 确定进度的线性进度指示器。
 .mdui-spinner 定义一个圆形进度指示器。
 .mdui-spinner-colorful 彩色的圆形进度指示器。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号