Skip to content

Progress 进度条

Minecraft 风格进度条,适合加载资源、世界生成、下载与提交状态。

基础用法

正在生成世界64%
Selected: 64.00
html
<mc-progress :value="64" label="正在生成世界" />

状态

资源加载80%
连接失败35%
html
<mc-progress :value="80" label="资源加载" status="success" />
<mc-progress :value="35" label="连接失败" status="error" />

不确定进度

正在搜索服务器...
html
<mc-progress label="正在搜索服务器" indeterminate />

自定义颜色

通过 bgcolor 属性设置进度条颜色,设置后 status 颜色不再生效。

下载资源包64%
加载世界64%
提交表单64%
html
<mc-progress :value="64" label="下载资源包" bgcolor="#2E6BE5" />
<mc-progress :value="64" label="加载世界" bgcolor="#9a3f3f" />
<mc-progress :value="64" label="提交表单" bgcolor="#ff8800" />

Props

名称类型默认说明
valuenumber0当前进度值
maxnumber100最大值
labelstring''左侧说明文本
showValuebooleantrue是否显示百分比
indeterminatebooleanfalse是否为不确定进度
status'normal' | 'success' | 'error'normal语义状态
bgcolorstring''自定义进度条颜色,设置后 status 颜色失效

MIT Licensed · 设计语言移植自 Spectrollay-McUI