vue-progress-circle-svg
🎉 vue-progress-circle-svg 🎉
A simple progress circle
svg
component made with Vue.js 2.
👩🏻💻👨🏻💻 Installation
The module is published on npmjs.org.
# 1.
# cd your-project-folder
# 2.
npm i vue-progress-circle-svg
Usage
As component
// In a .vue file
import progressCircle from 'vue-progress-circle-svg/dist/progress-circle.esm';
export default {
components: {
progressCircle,
},
};
Other usages (Coming soon!):
- Global component + Install;
- As a global plugin;
- Dirctly inside your browser;
Props
Attribute | Type | Default value | About |
---|---|---|---|
value | Number | 0 | @model The value for current progress |
size | Number | 24 | Sets the diameter of the progress circle in pixels |
startAngle | Number | 0 | Sets the starting sector angle, in radians |
minValue | Number | 0 | Sets the minimum value needed to normalize the value range |
maxValue | Number | 100 | Sets the maximum value needed to normalize the value range |
svgClassName | String | '' | Sets the svg root tag class name |
sectorClassName | String | '' | Sets the sector class name |
sectorFill | String | '#5B85AA' | Sets the sector fill |
sectorStroke | String | 'none' | Sets the sector stroke |
sectorFillRule | String | 'evenodd' | Sets the sector fill rule |
borderClassName | String | '' | Sets the border class name |
borderFill | String | 'none' | Sets the sector fill |
borderStroke | String | '#414770' | Sets the border stroke |
svgCustomProps | Object | () => {} | Binds every property of the passed Object as props/attributes of the svg component |
sectorCustomProps | Object | () => {} | Binds every property of the passed Object as props/attributes of the sector path tag |
circleCustomProps | Object | () => {} | Binds every property of the passed Object as props/attributes of the circle tag |
🐞 Issues / 📝 Discussions / 👥 Contribution
This is my first package, and a first step to the OSS world.
Feel free to open issues
, make suggest stuff opening a discussion
or Contribute
.
Thanks for using this component 💘.
🆓 License
MIT License // Copyright (©) 2021-now Gianluca Bianco
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@vue/cli-plugin-babel: ^4.5.10@vue/cli-service: ^4.5.10cross-env: ^7.0.3minimist: ^1.2.5rollup: ^2.36.1rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9vue: ^2.6.12vue-template-compiler: ^2.6.12