LuLu UI pure版中文文档 » 进度条效果

Fork Me

进度条效果

安装与调用

引入CSS即可:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui/Progress.css">

基本状态

1. 无属性设置

上传中:

<progress class="ui-progress"></progress>

Firefox浏览器下没有设置默认value值的时候,进度是100%填满,Chrome浏览器是当作0处理,本组件已经使用:indeterminate伪类进行的兼容处理。

除了支持class属性,还支持is属性,例如:

<progress is="ui-progress"></progress>

效果如下:

2. 设置value

上传中:

<progress class="ui-progress" value="0.5"></progress>
<progress is="ui-progress" value="0.5"></progress>

<progress>元素默认范围是0-1。

3. 设置max

上传中:

<progress class="ui-progress" value="40" max="100"></progress>

4. 宽度100%

上传中:

<progress class="ui-progress" value="0.4" width="100%"></progress>

只支持100%,其他width属性值没有效果。

动态改变值

1. JS设置value值

button.addEventListener('click', function () {
    progress.value = Math.random();
});

2. 真实Ajax请求进度

为了效果演示,请打开控制台,进入慢速模式。

本页贡献者:

zhangxinxu,gandao