BETA
Sort by:
Sorting

All pages will be filtered by your selected preferences

Buy us a coffeePsst! We're working to help you locate only the best packages and tools. If you think we're doing a good job, buy us a coffee :)
Buy us a coffeePsst! We're working to help you locate only the best packages and tools. If you think we're doing a good job, buy us a coffee :)

svg-progress-bar

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


111
11
3 months ago
401

svg-progress-bar

A simple,progress bar for Vue.js

Build Status LICENSE MIT

p>online demo | p > simple demo | p Chinese Document

Browser support

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

What is svg-progress-baro<

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>

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

keydescriptiondefaultval
typetype of the progress bar'circle''circle' 'rect'
valuevalue of the progress bar0Number String
valAddCalBackvalAddCalBack of the progress bar[][{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}]
optionsoptions of the progress bar{}Object
options.valRatevalue add Rate of the circle progress bar(suggest <= 1)1Number
options.radiusradius of the circle progress bar50Number
options.circleWidthstokeWidth of the circle progress bar10Number
options.varyStrokeArrayvaryStrokeArray of the circle progress bar if you want wide rangingnullArray
options.circleLinecapcircleLinecap of the circle progress bar'''round',''
options.maxValuemaxValue of the progress bar100Number
options.texttext of the progress barfunction (value) {return this.htmlifyNumber(value)}Function
options.textColortext color of the progress bar#000color
options.pathColorspathColors of the progress bar['#EEE', '#F00']Array
options.gradientColorgradientColor of the progress barnullArray
options.gradientOpacitygradientOpacity of the progress bar[1,1]Array
options.durationduration of the progress bar500Number
options.rectWidthrectWidth of the rect progress bar400Number
options.rectHeightrectHeight of the rect progress bar40Number
options.rectRadiusrectRadius of the rect progress bar0Number

Changelog

See the GitHub release history.

License

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