!npm

easy-circular-progress

Install

``
npm install easy-circular-progress --save
`

$3

`js


`

$3

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

$3

| 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.

$3

#### 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;
};
``

License


Contributors

Thanks goes to these wonderful people (emoji key):

Vincent Guo 💻 📖 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!