A customizable angular material circle counter using progress spinner.
You can look at the demo to play with the API.
ng add @angular/material @angular/cdk
yarn add ngx-mat-circle-counter
<ngx-circle-counter [color]="'primary'" [textColor]="'#69f0ae'" [size]="'xs'"></ngx-circle-counter>| Attributes | Type | Default value | Description |
|---|---|---|---|
| start | number | 0 | The value from the counter starts |
| size | 'xs' - 's' - 'm' - 'l' - 'xl' | 'm' | From 100px to 300px |
| color | string | 'primary' | Angular Material theme based color. |
| textColor | string | '' (black) | As there is no way to inherit font color from theme, put directly the font color there. |
| speed | number | 10 | Delay in millisecond to increase the counter. |
| value | number | 100 | The value to the counter ends |
| mode | 'viewport' or 'pageinit' | 'viewport' | In viewport mode, counter won't start untill it is visible. |
This project was generated with Angular CLI version 8.0.6.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.