NgxProgressIndicator

A progress indicator library for Angular apps.

Installation

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

Basic Usage

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
            });
    }
}

NgxProgressIndicatorConfig

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

Contributing

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.

License

MIT