LuLu UI pure版中文文档 »

Fork Me

进度条效果

作为插件单独使用

引入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值

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

2. 真实Ajax请求进度

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

本页贡献者:

zhangxinxu