svg-progress-bar

    0.1.17 • Public • Published

    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

    • 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

    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.

    Install

    npm i svg-progress-bar

    DownloadsWeekly Downloads

    525

    Version

    0.1.17

    License

    ISC

    Unpacked Size

    218 kB

    Total Files

    21

    Last publish

    Collaborators

    • chenxuan0316