Animated Linear Progress Bar Component - k-progress

Install & Download:

# NPM
$ npm install k-progress --save

Description:

The k-progress component enables you to visualize any percentage value in animated, customizable, linear progress bars.

How to use it:

1. Install and import the component.

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

2. Create progress bars in the template.

<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. Possible 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: ''
}