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

作为插件单独使用

引入CSS即可：

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

基本状态

1. 无属性设置

上传中：

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

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

如果想要兼容IE9浏览器，需要引入polyfill.js。

2. 设置value

上传中：

<progress class="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值

随机设置value值

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

2. 真实Ajax请求进度

加载图片

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