LineProgress

17:06

Description

A horizontal progress bar that expresses a 0–100 progress value through the width of its active segment. It uses the success theme by default and shows the percentage text inside the bar; type switches the theme color (setting it disables activeColor), and you can also customize the active/track colors, height, stripes and animated stripes, with shape offering round (capsule ends) and square (3px small radius) ends. When a default slot is present, it replaces the in-bar percentage text.

Compatibility

Platform	Support
App	✅ Supported (stripes striped / animated stripes striped-active are not supported: App has no diagonal repeating gradient or @keyframes, so the bar renders as a solid color)
H5	✅ Supported
WeChat Mini Program	✅ Supported (the active-segment width transition is disabled, so progress changes switch instantly)

Examples

Basic Usage

Uses the success theme color by default, displays the percentage inside, with semicircular ends.

View source

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

Configure Theme

Configure primary/error/warning/info themes via type; once set, active-color becomes ineffective.

View source

<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>

Custom Color

Customize the active and inactive colors via active-color / inactive-color.

View source

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

Custom Height

Set the progress bar height via height, in px.

View source

<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>

Hide Percentage

Hide the internal percentage text via show-percent=false, or use a custom slot.

View source

<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 Animation

striped shows stripes, and striped-active makes the stripes scroll dynamically.

View source

<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" gives capsule ends (default); shape="square" gives a flat end with a 3px small radius.

View source

<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

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
shape	Shape: round – capsule ends; square – flat end with a 3px small radius (formerly a boolean round, now merged into the library-wide shape vocabulary; for flat/square corners use custom-style)	'square' | 'round'	'round'	-
type	Theme color: primary|success|warning|error|info; once set, activeColor is ignored	string	''	-
activeColor	Color of the active portion; ignored when type is set	string	''	-
inactiveColor	Track (background) color of the progress bar	string	''	-
percent	Progress percentage, 0-100	number | string	0	-
showPercent	Whether to show the percentage value inside the bar	boolean	true	-
height	Height of the progress bar, in px	number | string	DEFAULT_HEIGHT	-
striped	Whether to show stripes	boolean	false	-
stripedActive	Whether the stripes animate	boolean	false	-

Events

ux-line-progress has no events.

Slots

Slot	Description	Version
default	Custom content inside the active segment; when present, the built-in percentage text is not rendered (showPercent is ignored)	-

Notes

1. Once type is set, activeColor is ignored (the theme background class takes over); activeColor is only read when type is empty, and when neither is set it falls back to the theme success color.
2. Stripes striped and animated stripes striped-active only take effect on H5 / WeChat Mini Program; App has no diagonal repeating gradient or @keyframes, so stripes degrade to a solid color.
3. On App the active-segment width is converted from the measured container width (using ResizeObserver internally); if the parent container is hidden or zero-width the segment is invisible, so make sure the container has a definite width.
4. On WeChat Mini Program the active-segment width transition is disabled (to avoid jank alongside native components), so progress changes switch instantly with no transition.
5. Once a default slot exists, the in-bar percentage text (showPercent) is not rendered; the slot content has no default color, so set it yourself.
6. shape only has round (capsule ends) and square (3px small radius); for a true flat/square end use custom-style.
7. When height is unset it falls back to the global config componentProps['ux-line-progress'].height and then to the built-in default of 14px.