LineProgress 线型进度条

17:06

说明

横向进度条，用激活段宽度表达 0–100 的进度值。默认取 success 主题色并在条内显示百分比文字；type 可切换主题色（设置后 activeColor 失效），也支持自定义激活 / 底色、高度、条纹与动态条纹，shape 提供 round（两端胶囊）与 square（3px 小圆角）两档端部。默认插槽存在时会替换条内的百分比文字。

兼容性

平台	支持情况
App	✅ 支持（条纹 striped / 动态条纹 striped-active 不支持：App 端不支持斜向重复渐变与 @keyframes，开启后进度条为纯色）
H5	✅ 支持
微信小程序	✅ 支持（激活段宽度过渡 transition 被禁用，进度变化为瞬时切换）

示例

基础用法

默认使用 success 主题色，内部显示百分比，两端为半圆。

查看源码

<template>
    <ux-line-progress :percent="70"></ux-line-progress>
</template>

配置主题

通过 type 配置 primary/error/warning/info 主题，设置后 active-color 失效。

查看源码

<template>
    <ux-line-progress :percent="30" type="primary"></ux-line-progress>
    <view class="gap"></view>
    <ux-line-progress :percent="60" type="error"></ux-line-progress>
    <view class="gap"></view>
    <ux-line-progress :percent="80" type="warning"></ux-line-progress>
    <view class="gap"></view>
    <ux-line-progress :percent="50" type="info"></ux-line-progress>
</template>

<style scoped>
.gap {
    height: 12px;
}
</style>

自定义颜色

通过 active-color / inactive-color 自定义激活色与底色。

查看源码

<template>
    <ux-line-progress :percent="40" active-color="#2979ff" inactive-color="#ecf5ff"></ux-line-progress>
</template>

自定义高度

通过 height 设置进度条高度，单位 px。

查看源码

<template>
    <ux-line-progress :percent="50" :height="6"></ux-line-progress>
    <view class="gap"></view>
    <ux-line-progress :percent="50" :height="20"></ux-line-progress>
</template>

<style scoped>
.gap {
    height: 12px;
}
</style>

隐藏百分比

通过 show-percent=false 隐藏内部百分比文字，或使用自定义插槽。

查看源码

<template>
    <ux-line-progress :percent="70" :show-percent="false"></ux-line-progress>
    <view class="gap"></view>
    <ux-line-progress :percent="70">
        <text class="slot-text">自定义内容</text>
    </ux-line-progress>
</template>

<style scoped>
.gap {
    height: 12px;
}
.slot-text {
    font-size: 10px;
    color: #ffffff;
}
</style>

条纹动画

striped 显示条纹，striped-active 让条纹动态滚动。

查看源码

<template>
    <ux-line-progress :percent="60" :striped="true"></ux-line-progress>
    <view class="gap"></view>
    <ux-line-progress :percent="60" :striped="true" :striped-active="true"></ux-line-progress>
</template>

<style scoped>
.gap {
    height: 12px;
}
</style>

形状 shape

shape="round" 两端胶囊（默认），shape="square" 小圆角 3px 平头。

查看源码

<template>
    <!-- 两档形状全演示：round 胶囊（不传即此档），square 小圆角 3px（平头） -->
    <ux-line-progress :percent="80" shape="round"></ux-line-progress>
    <ux-line-progress :percent="80" shape="square"></ux-line-progress>
</template>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
shape	形状：round-两端胶囊，square-小圆角 3px（原 boolean round，已并入全库 shape 词表；平头方角请走 custom-style）	'square' | 'round'	'round'	-
type	主题颜色，primary|success|warning|error|info，设置后 activeColor 失效	string	''	-
activeColor	激活部分的颜色，type 有值时此值失效	string	''	-
inactiveColor	进度条的底色	string	''	-
percent	进度百分比，0-100	number | string	0	-
showPercent	是否在进度条内部显示百分比值	boolean	true	-
height	进度条的高度，单位px	number | string	DEFAULT_HEIGHT	-
striped	是否显示条纹	boolean	false	-
stripedActive	条纹是否具有动态效果	boolean	false	-

Events

ux-line-progress 无事件。

Slots

插槽名	说明	版本
default	激活段内部的自定义内容，存在插槽时不再渲染百分比文字（showPercent 失效）	-

注意事项

1. 设置 type 后 activeColor 失效（由主题色背景类接管）；仅在未设置 type 时才读取 activeColor，两者都没有时回退主题 success 色。
2. 条纹 striped 与动态条纹 striped-active 仅 H5 / 微信小程序生效；App 端不支持斜向重复渐变与 @keyframes，条纹降级为纯色。
3. App 端激活段宽度由容器实测宽度换算为像素（内部用 ResizeObserver 监听），父容器隐藏或宽度为 0 时进度段不可见，请确保容器有确定宽度。
4. 微信小程序端激活段宽度过渡 transition 被禁用（避免与原生组件共存卡顿），进度变化为瞬时切换，无过渡动画。
5. 默认插槽一旦存在，条内的百分比文字（showPercent）不再渲染；插槽内文字无默认着色，需自行设置颜色。
6. shape 只有 round（两端胶囊）与 square（3px 小圆角）两档；平头直角请通过 custom-style 设置。
7. height 未显式传入时依次回退全局配置 componentProps['ux-line-progress'].height 与内建默认 14px。