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