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