Progress 进度条

用于展示操作进度，告知用户当前状态和预期

直线进度条

Progress 组件设置 percentage 属性即可，可以表示进度条对应的百分比。该属性必填 ,并且必须在 0-100 的范围内。你可以通过设置 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>

进度条内显示百分比标识

百分比不占用额外控件，适用于文件上传等场景。

Progress 组件可通过 storke-width 属性更改进度条的高度，并可通过 text-inside 属性来改变进度条内部的文字。

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>

自定义进度条颜色

可以通过 color 属性来设置进度条的颜色。该属性可以接收十六进制颜色值。

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>

环形进度条

Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。

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>

仪表盘形进度条

您可以指定 type 属性到 dashboard 使用控制面板进度栏。

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>

自定义内容

通过默认插槽添加自定义内容。

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>

动画进度条

使用 intermediate 属性来设置不确定的进度，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>

属性

属性	说明	类型	可选	默认
percentage	必填，百分比	number	0-100	0
cw	环形大小	number		125
type	进度条类型	string	line \| circle \| dashboard	line
text-inside	文字内侧显示	boolean		false
storke-width	进度条宽度	number		10
status	当前状态	string	success \| exception \| warning
indeterminate	动画进度条	boolean		false
duration	进度条速度\|动画速度	number		0.3
color	进度条颜色	string \| array		''
width	条形进度条长度	string		300px
show-text	是否显示进度条文字内容	boolean		true
storke-line-cap	进度条的形状	string	round \| square	round
format	指定文字内容	function

Progress 进度条 #

直线进度条 #

进度条内显示百分比标识 #

自定义进度条颜色 #

环形进度条 #

仪表盘形进度条 #

自定义内容 #

动画进度条 #

属性 #

Progress 进度条

直线进度条

进度条内显示百分比标识

自定义进度条颜色

环形进度条

仪表盘形进度条

自定义内容

动画进度条

属性