Progress

Displays the operation progress and informs the user of the current status and expectations.

Linear progress bar

Set the 'percentage' property on the Progress component to represent the percentage of the progress bar. This attribute must be, and must be in the range of 0 to 100. You can customize the format of text display by setting 'format'.

50%

Full

<template>
    <div>
        <kl-progress :percentage="50" />
        <kl-progress :percentage="100" :format="format" />
        <kl-progress :percentage="100" status="success" />
        <kl-progress :percentage="100" status="warning" />
        <kl-progress :percentage="50" status="exception" />
    </div>
</template>

<script setup lang="ts">
const format = (percentage: Number) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped></style>

The percentage is displayed in the progress bar

Percentage does not require additional controls and is applicable to scenarios such as file uploading.

The Progress component can change the height of the progress bar through the 'storke-width' property, and can change the text inside the progress bar through the 'text-inside' property.

100%

<template>
    <div>
        <kl-progress :percentage="100" :storke-width="26" :text-inside="true" />
        <kl-progress :percentage="100" :storke-width="24" :text-inside="true" status="success" />
        <kl-progress :percentage="100" :storke-width="22" :text-inside="true" status="warning" />
        <kl-progress :percentage="100" :storke-width="20" :text-inside="true" status="exception" />
    </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

Customize the progress bar color

You can set the color of the progress bar through the 'color' property. This property can accept hexadecimal color values.

100%

95%

90%

85%

80%

75%

70%

<template>
    <div>
        <kl-progress :percentage="100" color="red" />
        <kl-progress :percentage="95" color="orange" />
        <kl-progress :percentage="90" color="yellow" />
        <kl-progress :percentage="85" color="green" />
        <kl-progress :percentage="80" color="aqua" />
        <kl-progress :percentage="75" color="blue" />
        <kl-progress :percentage="70" color="purple" />
    </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

Circular progress bar

The Progress component can specify the use of a circular progress bar through the 'type' property, and within the circular progress bar, its size can also be set through the 'width' property.

15%

100%

<template>
    <div class="kl-wrapper">
        <kl-progress :percentage="15" width="125" type="circle" />
        <kl-progress :percentage="100" width="125" type="circle" />
        <kl-progress :percentage="100" width="125" type="circle" status="success" />
        <kl-progress :percentage="100" width="125" type="circle" status="warning" />
        <kl-progress :percentage="100" width="125" type="circle" status="exception" />
    </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.kl-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
</style>

Dashboard-shaped progress bar

You can specify the 'type' property to the 'dashboard' using the Control Panel progress bar.

10%

<template>
    <div class="kl-wrapper">
        <kl-progress :percentage="controlPercentage" :color="color" width="125" type="dashboard" />
        <kl-progress :percentage="percentage" width="125" :color="color" type="dashboard" />
    </div>
    <kl-button plain size="small" @click="decrease">-</kl-button>
    <kl-button plain size="small" @click="increase">+</kl-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const percentage = ref(0)
const color = ref([
    { color: 'red', percentage: 0 },
    { color: 'orange', percentage: 40 },
    { color: 'blue', percentage: 80 },
    { color: 'green', percentage: 100 }
])

setInterval(() => {
    if (percentage.value === 100) {
        percentage.value = 0
    } else {
        percentage.value += 10
    }
}, 1000)

const controlPercentage = ref(10)
const increase = () => {
    controlPercentage.value += 10
    if (controlPercentage.value > 100) {
        controlPercentage.value = 100
    }
}
const decrease = () => {
    controlPercentage.value -= 10
    if (controlPercentage.value < 0) {
        controlPercentage.value = 0
    }
}
</script>

<style scoped>
.kl-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.kl-button {
    padding: 0 20px;
}
</style>

Custom content

Add custom content through the default slot.

content

0%Progressing

<template>
    <div class="kl-wrapper">
        <kl-progress :percentage="percentage" color="lightgreen" :duration="0.3" width="250">
            <kl-button text>content</kl-button>
        </kl-progress>
        <kl-progress
            :percentage="percentage"
            :storke-width="30"
            :show-text="false"
            color="lightgreen"
            :duration="0.3"
            width="250"
        >
            <span>content</span>
        </kl-progress>
        <div style="display: flex; align-items: center">
            <kl-progress :percentage="percentage" type="circle" width="125">
                <kl-button type="success" circle :icon="KlOtherCorrectCircleLine"></kl-button>
            </kl-progress>
            <kl-progress :percentage="percentage" type="circle" width="125">
                <template #default="{ percentage }">
                    <span class="progress-value">{{ percentage }}</span>
                    <span class="progress-text">Progressing</span>
                </template>
            </kl-progress>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { KlOtherCorrectCircleLine } from '@kl-design/icons'
const percentage = ref(0)

setInterval(() => {
    percentage.value = Math.ceil(Math.random() * 100)
}, 1000)
</script>

<style scoped>
.kl-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 20px 0;
}

.progress-value {
    display: block;
    text-align: center;
}

.progress-text {
    display: block;
}
</style>

Animation progress bar

Use the 'intermediate' property to set the indefinite progress and 'duration' to control the animation duration.

50%

Full

<template>
    <div>
        <kl-progress :percentage="50" indeterminate :duration="1" />
        <kl-progress :percentage="100" indeterminate :format="format" :duration="1.5" />
        <kl-progress :percentage="100" indeterminate status="success" :duration="2" />
        <kl-progress :percentage="100" indeterminate status="warning" :duration="3" />
        <kl-progress :percentage="100" indeterminate status="exception" :duration="4" />
    </div>
</template>

<script setup lang="ts">
const format = (percentage: Number) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped></style>

Attribute

attribute	description	type	optional	default
percentage	Must be, percentage	number	0-100	0
cw	Ring size	number		125
type	Progress bar type	string	line \| circle \| dashboard	line
text-inside	Text inside display	boolean		false
storke-width	Progress bar width	number		10
status	Current state	string	success \| exception \| warning
indeterminate	Animation progress bar	boolean		false
duration	The progress bar speed \| animation speed	number		0.3
color	Progress bar color	string \| array		''
width	Bar progress bar length	string		300px
show-text	Whether to display progress bar text	boolean		true
storke-line-cap	Shape of the progress bar	string	round \| square	round
format	Specified text content	function

Progress #

Linear progress bar #

The percentage is displayed in the progress bar #

Customize the progress bar color #

Circular progress bar #

Dashboard-shaped progress bar #

Custom content #

Animation progress bar #

Attribute #

Progress

Linear progress bar

The percentage is displayed in the progress bar

Customize the progress bar color

Circular progress bar

Dashboard-shaped progress bar

Custom content

Animation progress bar

Attribute