ngx-progressbar
ngx-progressbar is simple angular progress bar component.
Usage
- Import NgxProgressbarModule in you app.modules.ts file
- Place below snippest in your template/ html
<ngx-progressbar [showValue]="true" [value]="value" [max]="200" text="Sample" height="50px" color="rgb(81, 195, 100)" barcolor="#FF0000"> </ngx-progressbar>
Configurations
- showValue: Whether to display percentage value towards end of progress bar
- max: Max progress value. You don't need to scale. You can set this to your max value and use. Defaults to 100
- value: Current progress value. Actual percentage will be calculated as, = value*100/max
- text: Text to be displayed at the start of the progress bar
- color: Background color of the progress component
- barcolor: Progress bar color
- height: Set this in 'px' to to change the height of the progress bar. Defaults to 20px