ngx-mat-circle-counter v1.0.0
ngx-mat-circle-counter
An angular material circle counter using progress spinner.
Demo
You can look at the demo to play with the API.
Installation
ng add @angular/material @angular/cdk
yarn add ngx-mat-circle-counter
use
<ngx-circle-counter [color]="'primary'" [textColor]="'#69f0ae'" [size]="'xs'"></ngx-circle-counter>Api
| 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 library was generated with Angular CLI version 8.0.3.
Code scaffolding
Run ng generate component component-name --project ngx-circle-counter to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-circle-counter.
Note: Don't forget to add
--project ngx-circle-counteror else it will be added to the default project in yourangular.jsonfile.
Build
Run ng build ngx-circle-counter to build the project. The build artifacts will be stored in the dist/ directory.
Publishing
After building your library with ng build ngx-circle-counter, go to the dist folder cd dist/ngx-circle-counter and run npm publish.
Running unit tests
Run ng test ngx-circle-counter to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.