Progress 进度条

INFO

用于展示进度或完成度。

基本语法

<c-progress value="当前值" max="最大值" label="标签" color="颜色" show-percent></c-progress>

参数说明

参数	类型	默认值	说明
value	number	必填	当前进度值
max	number	100	最大值
label	string	无	左侧标签文字
color	string	主题色	进度条颜色（CSS 颜色值）
show-percent	boolean	true	是否显示百分比

使用示例

示例 1：基本进度

<c-progress value="75"></c-progress>

效果：显示 75% 的进度条

示例 2：带标签

<c-progress value="85" label="项目进度"></c-progress>

示例 3：自定义颜色

<c-progress value="60" label="HTML" color="#e34c26"></c-progress>
<c-progress value="40" label="CSS" color="#264de4"></c-progress>
<c-progress value="50" label="JavaScript" color="#f0db4f"></c-progress>

示例 4：技能展示

<h4>技能水平</h4>
<c-progress value="90" label="Vue.js" color="#42b883"></c-progress>
<c-progress value="85" label="React" color="#61dafb"></c-progress>
<c-progress value="75" label="TypeScript" color="#3178c6"></c-progress>
<c-progress value="70" label="Node.js" color="#339933"></c-progress>

示例 5：自定义最大值

<c-progress value="750" max="1000" label="积分"></c-progress>

示例 6：隐藏百分比

<c-progress value="50" label="加载中" show-percent="false"></c-progress>

使用效果