https://github.com/chenxuan0000/svg-progress-bar

:panda_face: A simple,progress bar for Vue.js
https://github.com/chenxuan0000/svg-progress-bar

svg-progress-bar vue

Last synced: about 11 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/chenxuan0000/svg-progress-bar
• Owner: chenxuan0000
• License: mit
• Created: 2018-01-08T08:49:49.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-17T07:36:26.000Z (over 5 years ago)
• Last Synced: 2024-04-24T11:10:42.600Z (7 months ago)
• Topics: svg-progress-bar, vue
• Language: Vue
• Homepage:
• Size: 219 KB
• Stars: 115
• Watchers: 6
• Forks: 28
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svg-progress-bar

> A simple,progress bar for Vue.js

[![Build Status](https://img.shields.io/appveyor/ci/gruntjs/grunt/master.svg) ![LICENSE MIT](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/svg-progress-bar) ![](https://img.shields.io/npm/v/svg-progress-bar.svg)

                                         



    

                                          



   🐾online demo |

   🌾 simple demo |

   📘 Chinese Document



## Browser support

| [](http://godban.github.io/browsers-support-badges/)IE | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari | [](http://godban.github.io/browsers-support-badges/)iOS | [](http://godban.github.io/browsers-support-badges/)Android |

|:---------:|:---------:|:---------:|:---------:|:---------:|:---------:|

| IE9+ | ✓| ✓ | ✓ | ✓ | ✓ | ✓

## What is svg-progress-bar？

`svg-progress-bar` is a based on [circles](https://github.com/lugolabs/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

```bash

npm install svg-progress-bar --save

```

## Usage

### ES6

> Specific reference [example-src/App.vue](https://github.com/chenxuan0000/svg-progress-bar/blob/master/examples-src/App.vue)

```js

// **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

  import svg from 'svg-progress-bar'

   export default {

      components: {

        svg

      }

   }

```

s

### normal use (script tag)

Example:

> Specific reference [test/test.html](https://github.com/chenxuan0000/svg-progress-bar/blob/master/test/test.html)

```html

  ...

  


    

  

  

  

  

    new Vue({

      el: '#app'

    })

  


```

## 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](https://github.com/chenxuan0000/svg-progress-bar/releases).

## License

svg-progress-bar is open source and released under the [MIT License](LICENSE).