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

安装与调用

单独使用：

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

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Progress/index.js"></script>

<script type="module">
    import 'https://qidian.gtimg.com/lulu/hope/ui/Progress/index.js';
</script>

基本状态

通过给 <progress> 元素设置 is="ui-progress"。

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

也支持 class 类名设置样式，不过只有静态效果，非不必要不要使用。

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

设置value

设置 value 值后，进度条就变成静态的进度效果，不会有来回的动画。

进度条默认范围是 0-1，因此，如果设置 value="0.5"，会显示一半进度。

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

<button id="rb" type="primary" is="ui-button">设置随机 value 值</button>
<progress id="pg" is="ui-progress" value="0.5"></progress>

// 随机进度值
rb.addEventListener('click', function () {
    pg.value = Math.random();
});

设置 max

进度范围尺度可以通过 max 属性进行设置，例如：

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

样式设置

尺寸设置

使用 CSS 的 width 和 height 属性进行设置，如果引入了对应的组件 JS，还可以在 <progress> 元素上使用 width 和 height 属性进行设置，支持任意的长度单位、函数。

<progress is="ui-progress" value=".5" width="10em"></progress>

<progress is="ui-progress" value=".5" height=".5rem"></progress>

颜色设置

使用 CSS 的 color 属性进行设置，如果引入了对应的组件 JS，还可以在 <progress> 元素上使用 color 属性进行设置，支持任意的色值、渐变以及合法的函数。

<progress is="ui-progress" value=".5" color="var(--ui-red)"></progress>

<progress is="ui-progress" value=".8" color="linear-gradient(to right, deepskyblue, deeppink) no-repeat 0 / 100vw"></progress>

圆角设置

设置 radius="0" 可以让进度条表现为直角。

<progress is="ui-progress" value=".5" height=".5rem" radius="0"></progress>

底层实现

进度条的样式设置是通过若干 CSS 变量实现的。

通过改变以上 CSS 自定义属性的值，也是可以设置进度条的样式的。

标签提示

如果希望在进度条上实时显示进度值，可以通过 label 属性实现。

<!-- 也可以是 label="true" -->
<progress is="ui-progress" value=".35" label></progress>

支持使用任意的自定义格式，例如：

<progress is="ui-progress" value=".35" label="${value}/${max}"></progress>

<progress is="ui-progress" value="22.5" max="30" color="var(--ui-purple)" label="百分之${Math.round(100*value/max)}"></progress>

目前可使用的的模板变量是 ${value}和${max}。

自定义背景

提示标签支持样式的自定义，包括使用图像代替，语法是使用下面几个 CSS 变量。

下面是一个使用案例，使用火箭图标作为进度标签的背景。

<progress is="ui-progress" class="progress-rocket" value=".35" label="true"></progress>

.progress-rocket {
    --ui-progress-background-label: url(roctet.svg);
    --ui-progress-color-label: transparent;
    /* 图标居中偏移 */
    --ui-progress-offset-label: -50%;
    /* 完成进度条颜色 */
    color: #38603a;
    /* 增加火箭图标尺寸 */
    line-height: 1.75;
}

请求模拟

加载图片

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