easy circular progress component with counting effect
npm install easy-circular-progress



!npm




```
npm install easy-circular-progress --save
` :transitionDuration="5000" :transitionDuration="5000" js
:radius="50"
:strokeWidth="10"
value="86.12"
>
Slow One
:radius="55"
:strokeWidth="10"
value="86.12567"
>
More Precise
`
| Property | Type | Required? | Description |
| :----------------- | :--------------- | :-------- | :-------------------------------------------------------------------- |
| strokeWidth | Number | | default is 4, the width of the progress circle, the bigger the bolder |
| radius | Number | | the inner circle radius, default is 38 |
| transitionDuration | Number | | default is 1000, transitionDuration for the animation |
| strokeColors | String | | default is "#aaff00" |
| value | Number \| String | | default is 0.0, should be less or equal then 100 |
| Slot Name | Description |
| :-------- | ----------------------------------- |
| footer | we can add a footer for the circle |
| default | the content displayed in the circle |
> if default slot provided, the coutdown effect will be ignored.
#### Customized Theme
- In your customized scss file (demo.scss)
`scss`
$--circular-progress-int-fz: 28px;
$--circular-progress-dec-fz: 12px;
@import '~easy-circular-progress/src/index';
- import the scss to override the default theme in main.js (entry file) before you import the Draw component
`js`
import './demo.scss';
> variables
We split the number into two parts (int, dec)
We can define the font-size for each part
- \$--circular-progress-int-fz: 28px;
- \$--circular-progress-dec-fz: 12px;
#### Possibly Polyfill
`js``
Number.isNaN =
Number.isNaN ||
function(value) {
return value !== value;
};

Thanks goes to these wonderful people (emoji key):
Vincent Guo 💻 📖 🚇 |
This project follows the all-contributors specification. Contributions of any kind welcome!