Progress 进度条
展示当前操作进度，告知用户状态。
线形进度条
使用必填属性 percentage，取值 0-100。可通过 format 自定义文案格式。
50%
Full
vue
<template>
<div class="demo-progress">
<u-progress :percentage="50" />
<u-progress :percentage="100" :format="format" />
<u-progress :percentage="100" status="success" />
<u-progress :percentage="100" status="warning" />
<u-progress :percentage="50" status="exception" />
</div>
</template>
<script lang="ts" setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
<style scoped>
.demo-progress .u-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
条内百分比
百分比文案不占额外宽度。
stroke-width 控制条高度；text-inside 将百分比放在条内。
70%
100%
80%
50%
vue
<template>
<div class="demo-progress">
<u-progress :text-inside="true" :stroke-width="26" :percentage="70" />
<u-progress
:text-inside="true"
:stroke-width="24"
:percentage="100"
status="success"
/>
<u-progress
:text-inside="true"
:stroke-width="22"
:percentage="80"
status="warning"
/>
<u-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
/>
</div>
</template>
<style scoped>
.demo-progress .u-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
自定义颜色
color 可为颜色字符串、函数或分段数组。
20%
20%
20%
20%
vue
<template>
<div class="demo-progress">
<u-progress :percentage="percentage" :color="customColor" />
<u-progress :percentage="percentage" :color="customColorMethod" />
<u-progress :percentage="percentage" :color="customColors" />
<u-progress :percentage="percentage" :color="customColors" />
<div>
<u-button-group>
<u-button :icon="Minus" @click="decrease" />
<u-button :icon="Plus" @click="increase" />
</u-button-group>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Minus, Plus } from '@uniboot/icons-vue'
const percentage = ref(20)
const customColor = ref('#2F54EB')
const customColors = [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
]
const customColorMethod = (percentage: number) => {
if (percentage < 30) {
return '#909399'
}
if (percentage < 70) {
return '#e6a23c'
}
return '#67c23a'
}
const increase = () => {
percentage.value += 10
if (percentage.value > 100) {
percentage.value = 100
}
}
const decrease = () => {
percentage.value -= 10
if (percentage.value < 0) {
percentage.value = 0
}
}
</script>
<style scoped>
.demo-progress .u-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
环形进度条
type 设为 circle；width 调整圆环尺寸。
0%
25%
vue
<template>
<div class="demo-progress">
<u-progress type="circle" :percentage="0" />
<u-progress type="circle" :percentage="25" />
<u-progress type="circle" :percentage="100" status="success" />
<u-progress type="circle" :percentage="70" status="warning" />
<u-progress type="circle" :percentage="50" status="exception" />
</div>
</template>
<style scoped>
.demo-progress .u-progress--circle {
margin-right: 15px;
}
</style>隐藏源代码
仪表盘进度条
type 设为 dashboard。
10%
0%
vue
<template>
<div class="demo-progress">
<u-progress type="dashboard" :percentage="percentage" :color="colors" />
<u-progress type="dashboard" :percentage="percentage2" :color="colors" />
<div>
<u-button-group>
<u-button :icon="Minus" @click="decrease" />
<u-button :icon="Plus" @click="increase" />
</u-button-group>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Minus, Plus } from '@uniboot/icons-vue'
const percentage = ref(10)
const percentage2 = ref(0)
const colors = [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
]
const increase = () => {
percentage.value += 10
if (percentage.value > 100) {
percentage.value = 100
}
}
const decrease = () => {
percentage.value -= 10
if (percentage.value < 0) {
percentage.value = 0
}
}
onMounted(() => {
setInterval(() => {
percentage2.value = (percentage2.value % 100) + 10
}, 500)
})
</script>
<style scoped>
.demo-progress .u-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
.demo-progress .u-progress--circle {
margin-right: 15px;
}
</style>隐藏源代码
自定义内容
使用默认插槽自定义展示内容。
Content
80%Progressing
vue
<template>
<div class="demo-progress">
<u-progress :percentage="50">
<u-button text>Content</u-button>
</u-progress>
<u-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</u-progress>
<u-progress type="circle" :percentage="100" status="success">
<u-button type="success" :icon="Check" circle />
</u-progress>
<u-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</u-progress>
</div>
</template>
<script lang="ts" setup>
import { Check } from '@uniboot/icons-vue'
</script>
<style scoped>
.percentage-value {
display: block;
margin-top: 10px;
font-size: 28px;
}
.percentage-label {
display: block;
margin-top: 10px;
font-size: 12px;
}
.demo-progress .u-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
.demo-progress .u-progress--circle {
margin-right: 15px;
}
</style>隐藏源代码
不确定进度
indeterminate 为 true 时展示不确定进度，可用 duration 控制动画时长。
50%
Full
vue
<template>
<div class="demo-progress">
<u-progress :percentage="50" :indeterminate="true" />
<u-progress :percentage="100" :format="format" :indeterminate="true" />
<u-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
/>
<u-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
/>
<u-progress :percentage="50" status="exception" :indeterminate="true" />
</div>
</template>
<script lang="ts" setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
<style scoped>
.demo-progress .u-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
条纹进度
striped 显示条纹；striped-flow 为 true 时条纹流动，可用 duration 控制动画时长。
50%
vue
<template>
<div class="demo-progress">
<u-progress :percentage="50" :stroke-width="15" striped />
<u-progress
:percentage="30"
:stroke-width="15"
status="warning"
striped
striped-flow
/>
<u-progress
:percentage="100"
:stroke-width="15"
status="success"
striped
striped-flow
:duration="10"
/>
<u-progress
:percentage="percentage"
:stroke-width="15"
status="exception"
striped
striped-flow
:duration="duration"
/>
<u-button-group>
<u-button :icon="Minus" @click="decrease" />
<u-button :icon="Plus" @click="increase" />
</u-button-group>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Minus, Plus } from '@uniboot/icons-vue'
const percentage = ref<number>(70)
const duration = computed(() => Math.floor(percentage.value / 10))
const increase = () => {
percentage.value += 10
if (percentage.value > 100) {
percentage.value = 100
}
}
const decrease = () => {
percentage.value -= 10
if (percentage.value < 0) {
percentage.value = 0
}
}
</script>
<style scoped>
.demo-progress .u-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
进度条 API
进度条 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| percentage required | 百分比 | number | 0 |
| type | 类型 | enum | line |
| stroke-width | 线形进度条高度 | number | 6 |
| text-inside | 百分比是否显示在条内，仅 type 为 line 时生效 | boolean | false |
| status | 状态 | enum | — |
| indeterminate | 不确定进度 | boolean | false |
| duration | 不确定进度或条纹流动动画时长 | number | 3 |
| color | 进度条颜色，覆盖 status；可为字符串、函数或 { color, percentage }[] 数组 | string / function / Array | '' |
| width | 环形/仪表盘画布宽度 | number | 126 |
| show-text | 是否显示百分比 | boolean | true |
| stroke-linecap | 环形/仪表盘端点形状 | enum | round |
| format | 自定义百分比文案 | Function | — |
| striped | 是否显示条纹 | boolean | false |
| striped-flow | 条纹是否流动 | boolean | false |
进度条 插槽
| 名称 | 说明 | 类型 |
|---|---|---|
| default | 自定义内容 | object |