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: ''
}Preview:
Changelog:
08/13/2020
- v1.5.0
Download Details:
Author: xrkffgg
Live Demo: animated-linear-progress-bar
Download Link: https://github.com/xrkffgg/k-progress/archive/master.zip
Official Website: https://github.com/xrkffgg/k-progress
Install & Download:
# NPM
$ npm install k-progress --save