Ngx-progress-indicator NPM

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