LineProgress Linear Progress Bar Component

Displays the current progress of an operation or task, such as uploading a file. It is a linear progress bar.

📌 Platform Differences

APP(vue)	H5	WeChat Mini Program	Alipay Mini Program
✔	✔	✔	✔

🏯 Basic Usage

<!-- Global usage -->
<hy-line-progress :percentage="30"></hy-line-progress>

Hide Percentage

• The show-text parameter configures whether to display the percentage value inside the progress bar

<template>
    <hy-line-progress :percentage="30" :showText="false"></hy-line-progress>
</template>

Custom Height

• height: the height of the progress bar

<template>
    <hy-line-progress :percentage="30" height="8"></hy-line-progress>
</template>

Custom Style

<template>
    <hy-line-progress :percentage="30" activeColor="red" inactiveColor="greed"></hy-line-progress>
</template>

Manual Increment/Decrement

• Increase or decrease the progress by controlling the value of the percentage parameter

<template>
    <view style="margin-top: 50px;">
        <hy-line-progress :percentage="percentage" />
        <view style="display: flex;margin-top: 100px;">
            <button @click="computedWidth('minus')">Decrease</button>
            <button @click="computedWidth('plus')">Increase</button>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    import { range } from 'hyfk-app';

    const percentage = ref(30);

    const computedWidth = (type) => {
        if (type === 'plus') {
            percentage.value = range(0, 100, percentage.value + 10);
        } else {
            percentage.value = range(0, 100, percentage.value - 10);
        }
    };
</script>

API

LineProgress Props

Parameter	Description	Type	Default Value
activeColor	The color of the active portion of the progress bar	string	-
inactiveColor	The background color of the progress bar, gray by default	string	-
percentage	Progress percentage, a number	number	0
showText	Whether to display the percentage value inside the progress bar	boolean	true
height	The height of the progress bar; default unit is px for numbers	number | string	12
fontSize	Font size; default unit is px for numbers	number | string	-
customStyle	Custom external styles to be applied	CSSProperties	-
customClass	Custom external class name	string	-

Slots

Slot Name	Description	Accepted Value
default	Pass in custom display content, which will override the default percentage display	-

CSS Variables

Variable Name	Description	Default Value
--hy-line-progress-text-font-size	Progress text font size	10px
--hy-line-progress-radius	Progress bar border radius	Follows --hy-radius-semicircle (100px)
--hy-line-progress-text-color	Progress text color	#ffffff

12:33