svg progress bar

:panda_face: A simple,progress bar for Vue.js

chenxuan0000
114
28
Vue

svg-progress-bar

A simple,progress bar for Vue.js

Build Status LICENSE MIT

🐾online demo | 🌾 simple demo | πŸ“˜ Chinese Document

Browser support

IE
IE		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 iOS Safari
iOS		 Chrome for Android
Android
IE9+ βœ“ βœ“ βœ“ βœ“ βœ“

What is svg-progress-bar？

svg-progress-bar is a based on circles of the secondary development of project vue components

Features

  • [x] zero dependence, small volume.
  • [x] currently supports loop/rectangle progress bar.
  • [x] the configuration meets a variety of requirements.
  • [x] ongoing maintenance

Installation

NPM

npm install svg-progress-bar --save

Usage

ES6

Specific reference example-src/App.vue

// **main.js**
import Vue from 'vue'
import svg from 'svg-progress-bar'
// you can set componentName default componentName is svg-progress-bar
Vue.use(svg,{componentName: 'percent-bar'})
// 1.global install
import Vue from 'vue'
import svg from 'svg-progress-bar'
// you can set custom componentName
Vue.use(svg,{componentName: 'percent-bar'})

// 2.single .vue file install
<script>
  import svg from 'svg-progress-bar'
   export default {
      components: {
        svg
      }
   }
</script>

s

normal use (script tag)

Example:

Specific reference test/test.html

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <svg-progress-bar></svg-progress-bar>
  </div>
  <script src="vue.js"></script>
  <script src="svg-progress-bar"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

Configure list

key description default val
type type of the progress bar 'circle' 'circle' 'rect'
value value of the progress bar 0 Number String
valAddCalBack valAddCalBack of the progress bar [] [{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}]
options options of the progress bar {} Object
options.valRate value add Rate of the circle progress bar(suggest <= 1) 1 Number
options.radius radius of the circle progress bar 50 Number
options.circleWidth stokeWidth of the circle progress bar 10 Number
options.varyStrokeArray varyStrokeArray of the circle progress bar if you want wide ranging null Array
options.circleLinecap circleLinecap of the circle progress bar '' 'round',''
options.maxValue maxValue of the progress bar 100 Number
options.text text of the progress bar function (value) {return this.htmlifyNumber(value)} Function
options.textColor text color of the progress bar #000 color
options.pathColors pathColors of the progress bar ['#EEE', '#F00'] Array
options.gradientColor gradientColor of the progress bar null Array
options.gradientOpacity gradientOpacity of the progress bar [1,1] Array
options.duration duration of the progress bar 500 Number
options.rectWidth rectWidth of the rect progress bar 400 Number
options.rectHeight rectHeight of the rect progress bar 40 Number
options.rectRadius rectRadius of the rect progress bar 0 Number

Changelog

See the GitHub release history.

License

svg-progress-bar is open source and released under the MIT License.