Skip to content

Progress 进度条

用于展示任务或操作进度的线性条与环形圈控件,支持百分比显示、状态配色与自定义颜色。


代码示例

1. 线性进度条 (Line Progress)

vue
<template>
  <mu-progress :percent="65" />
  <mu-progress :percent="80" status="success" />
  <mu-progress :percent="40" status="warning" />
  <mu-progress :percent="20" status="error" />
</template>

2. 环形进度条 (Circle Progress)

vue
<template>
  <mu-progress type="circle" :percent="75" :size="120" />
</template>

API 属性说明 (Props)

参数名说明类型可选值默认值
percent当前进度百分比 (0-100)Number0 ~ 1000
type进度条展示类型Stringline | circle'line'
strokeWidth进度条/圆环线条粗细 (rpx/px)Number | String-12
activeColor进度条激活颜色String-'#171717'
bgColor进度条轨道底色String-'rgba(226,232,240,0.6)'
showInfo是否显示进度百分比文字Booleantrue | falsetrue
size环形进度条直径尺寸 (px,仅 type="circle" 生效)Number | String-120
status进度状态配色预设Stringsuccess | warning | error''

插槽说明 (Slots)

插槽名说明
default自定义进度百分比文字内容

基于 MIT 协议开源发行

H5 模拟器 (progress)☀️🔄