Package Exports

svg-progress-bar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-progress-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.