使用k-progress组件，您可以可视化动画，可自定义的线性进度条中的任何百分比值。

变更日志：

2020年8月13日

• v1.5.0

安装和下载：

# NPM
$ npm install k-progress --save

如何使用它：

1.安装并导入组件。

import KProgress from 'k-progress';
Vue.component('k-progress', KProgress);

2.在模板中创建进度条。

<template>
  <div>
    <k-progress 
      status="success" 
      type="line"
      :percent="20" >
    </k-progress>
    <k-progress 
      active 
      status="error" 
      type="lump"
      :cut-width="4"
      :percent="50" >
    </k-progress>
    <k-progress 
      active 
      status="error" 
      type="line"
      :border="false"
      :color="['#40a9ff', '#5cdbd3']"
      :percent="60" >
    </k-progress>
    <k-progress 
      active 
      status="error" 
      type="lump"
      :border="false"
      :line-height="8"
      :cut-width="4"
      :cut-color="'#40a9ff'"
      :color="['#f5af19', '#f12711']"
      :percent="80" >
    </k-progress>
  </div>
</template>

3.可能的 props 。

percent: {
  type: Number,
  default: 0,
  required: true,
  validator: val => val >= 0 && val <= 100
},
showText: {
  type: Boolean,
  default: true
},
active: {
  type: Boolean,
  default: false
},
bgColor: {
  type: String,
  default: '#ebeef5'
},
cutColor: {
  type: String,
  default: '#ebeef5'
},
cutWidth: {
  type: Number,
  default: 1,
},
type: {
  type: String,
  default: 'line',
  validator: val => ['line', 'lump',].indexOf(val) > -1
},
border: {
  type: Boolean,
  default: true
},
status: {
  type: String,
  validator: val => ['success', 'warning', 'error'].indexOf(val) > -1
},
lineHeight: {
  type: Number,
  default: 6
},
color: {
  type: [String, Array, Function],
  default: ''
},
activeColor: {
  type: [String, Array],
  default: ''
}

---

官网：https://github.com/xrkffgg/k-progress/blob/master/README-CN.md

GitHub下载：https://github.com/xrkffgg/k-progress/archive/master.zip