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

安装与调用

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Progress.css">

或者：

import 'lu2/theme/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值

随机设置value值

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

2. 真实Ajax请求进度

加载图片

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