Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vrajroham/vue-circle-progress
A Vue.js component to draw animated circular progress bars
https://github.com/vrajroham/vue-circle-progress
jquery vuejs vuejs-components
Last synced: 1 day ago
JSON representation
A Vue.js component to draw animated circular progress bars
- Host: GitHub
- URL: https://github.com/vrajroham/vue-circle-progress
- Owner: vrajroham
- License: gpl-3.0
- Created: 2017-06-03T09:41:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T15:02:56.000Z (almost 2 years ago)
- Last Synced: 2024-11-09T02:37:15.975Z (6 days ago)
- Topics: jquery, vuejs, vuejs-components
- Language: Vue
- Size: 2.24 MB
- Stars: 146
- Watchers: 3
- Forks: 28
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-circle-progress
> A Vue.js component to draw animated circular progress bars
Draw animated progress circle like below,
---
## Install
````
// For Vue.js 2.0+
npm install vue2-circle-progress
````
## Usage
1. Import the module
2. Register it as a component as you would any other Vue component
3. Use it within your template
### Example
````vue
A Vue.js component to draw animated circular progress bars!
Slot!
import VueCircle from 'vue2-circle-progress'
export default {
components: {
VueCircle
},
data(){
return{
fill : { gradient: ["red", "green", "blue"] },
}
},
methods:{
progress(event,progress,stepValue){
console.log(stepValue);
},
progress_end(event){
console.log("Circle progress end");
}
}
}
````
## Props
Follwing `props` are used while initialization
> Note : Only `progress` is a required prop. Others are optional
| Prop Name | Type | Description |
|----------|------|--------------|
| progress `(required)`| Number | Total progress of circle (filled area) |
| size | Number | Size of circle
Default : `200` |
| reverse | Boolean | Reverse animation and arc draw
Default:`false`|
| line-cap | String | Arc line cap: "butt", "round" or "square"
`Default: "butt"` |
| fill | Object | The arc fill config. You may specify next:
- `"#ff1e41"`
- `{ color: "#ff1e41" }`
- `{ color: 'rgba(255, 255, 255, .3)' }`
- `{ gradient: ["red", "green", "blue"] }`
- `{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }`
- `{ gradient: [ ... ], gradientAngle: Math.PI / 4 }`
- `{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }`
- `{ image: "http://i.imgur.com/pT0i89v.png" }`
- `{ image: imageInstance }`
- `{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }`
Default: `{ gradient: ["#3aeabb", "#fdd250"] }` |
| empty-fill | String | Color of the "empty" arc. Only a color fill supported by now
Default: `"rgba(0, 0, 0, .1)"` |
| animation | Mixed | Animation config. See [jQuery animations](http://api.jquery.com/animate/).
You may also set it to `false`
Default: `{ duration: 1200, easing: "circleProgressEasing" }`
`"circleProgressEasing"` *is just a ease-in-out-cubic easing* |
| animation-start-value | Number | Default animation starts at `0.0` and ends at specified `value`. Let's call this direct animation. If you want to make reversed animation then you should set `animationStartValue` to `1.0`. Also you may specify any other value from `0.0` to `1.0`
Default: `0.0` |
| start-angle | Number | Initial angle (for `0` value)
Default: `-Math.PI` |
| insert-mode | String | Canvas insertion mode: append or prepend it into the parent element
Default: `"prepend"` |
| thickness | Number | Width of the arc. By default it's automatically calculated as 1/14 of `size` but you may set your own number
Default: `"auto"` |
| show-percent | Boolean | Show loaded percentage inside circle. If `inner-text` property is set then percentage will not be shown.
Default : `true`|
---
## Events
Events emitted by the component to the parent.
|Event Name|Description|
|----------|-----------|
|vue-circle-init(event)| This event is emmited after the circle is initialized |
|vue-circle-progress(event,progress,stepValue)|This event is emitted on every progress step|
|vue-circle-end(event)|This event is emitted after completing progress|
------------------
## Methods
Methods you can call on the component.
| Method | Description |
|------------|-------------|
| updateProgress(value) | It will update component progress value and animate the change. **It doesn't redraw the widget.** |
| updateFill(fill) | It will update component fill color. |
## Using Methods
Methods can be called from your parent component by making use of the special tag "ref".
When you initialize the component add a unique ID to the component using the ref tag, like this
```html
```
Then from your parent Vue instance, you can call the methods by using the following:
```javascript
this.$refs.myUniqueID.updateProgress(21);
this.$refs.myUniqueID.updateFill("#ff1e41");
```
## Development
If you feel you can make this better, you are welcome to contribute. I'd love to see your ideas.
``` bash
# install dependencies
npm install
# serve example at localhost:8080
npm run dev
# build any changes made
npm run build
```
## Thanks
This is a Vue2 component built with wrapper around [this library](https://github.com/kottenator/jquery-circle-progress) Thanks to **Rostyslav Bryzgunov**.