A progress indicator library for Angular apps.
You can install it through Angular CLI:
ng add ngx-progress-indicator
or with npm:
# For Angular version 13
npm i ngx-progress-indicator@2
# For Angular version 14
npm i ngx-progress-indicator@3
# For Angular version 15
npm i ngx-progress-indicator@4
# For Angular version 16
npm i ngx-progress-indicator@5
When you install using npm, you will also need to import NgxProgressIndicatorModule
in your app.module
. You can also set global NgxProgressIndicator config (Partial<NgxProgressIndicatorConfig>
) here.:
import { NgxProgressIndicatorModule } from 'ngx-progress-indicator';
@NgModule({
imports: [NgxProgressIndicatorModule.forRoot({ color: '#0083ff' })],
})
class AppModule {}
import { Component } from '@angular/core';
import { NgxProgressIndicatorService } from 'ngx-progress-indicator';
import { interval, take } from 'rxjs';
@Component({
...
})
export class AppComponent {
constructor(private service: NgxProgressIndicatorService) {
// show ngx progress indicator
this.service.start();
interval(3000)
.pipe(take(1))
.subscribe({
next: () => this.service.finish() // hide ngx progress indicator after 3 seconds
});
}
}
Name | Type | Description |
---|---|---|
size | number or string |
The size (height) of the progress indicator. Numeric values get converted to px. Default: false |
color | string |
Color of the progress bar. Also used for the glow around the bar. Default: false |
className | string |
Class name used for the progress bar element. Default: false |
delay | number |
How many milliseconds to wait before the progress bar animation starts after calling .start(). Default: false |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.