xrkffgg / k-progress-v3

δΈ€δΈͺ Vue3 ζ’δ»ΆοΌŒηΊΏζ€§θΏ›εΊ¦ζ‘γ€‚A Vue3 plugin, linear progress bar. https://xrkffgg.github.io/Knotes/course/k-progress.html
MIT License
13 stars 2 forks source link
component progress-bar vue vue3

🌈 k-progress-v3

A Vue plugin, linear progress bar.

🎈 Vue2

If you need vue2 version, you can find in k-progress.

πŸ“š Course

k-progress

πŸ“¦ Install

npm install -S k-progress-v3
# or
yarn add k-progress-v3

πŸ”¨ Begin Start

// main.js
import KProgress from 'k-progress-v3';

const app = createApp(App);
app
  .component('k-progress', KProgress)
  .mount('#app');

πŸ“” Attributes

Attribute Type Default Optional explain
percent Number 0 0-100 Percent (Required)
line-height Number 6 Progress bar height
type String line line / lump Progress bar type
status String success / warning / error Progress bar status
color String / Array / Function Progress bar color; When using Array, the limit is 6; When using Function, the argument is percent
color-flow Boolean false Whether to enable color flow
flow-second Number 5 1-6 The time required for the flow, that is, the smaller the time, the faster the speed
bg-color String #ebeef5 Color code Progress bar background color
border Boolean true Whether arc
show-text Boolean true Whether to show progress bar text
format Function Custom text display, parameter is percent
cut-width Number 1 lump width
cut-color String #ebeef5 Color code lump color
active Boolean false Whether to enable dynamic effects
active-color String Dynamic effect color

πŸ“’ ChangeLog

ChangeLog

πŸ–Š Thanks

Thank you for using, if you find some problems, welcome to correct!

LICENSE

MIT