svg-progress-bar

A simple,progress bar for Vue.js

🐾online demo | 🌾 simple demo | 📘 Chinese Document

Browser support

IE	Firefox	Chrome	Safari	iOS	Android
IE9+	✓	✓	✓	✓	✓

What is svg-progress-bar？

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

Features

zero dependence, small volume.
currently supports loop/rectangle progress bar.
the configuration meets a variety of requirements.
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>

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.

chenxuan0000/svg-progress-bar

chenxuan0000

Reviews

Repository Details