ngx-progressbar

Angular Progressbar

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

---

Table of Contents

• Live Demo
• Installation
• Usage
• Automagic Usage
• Issues
• Author
• Credits

Installation

Install it with npm

npm install ngx-progressbar --save

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ngx-progressbar:

map: {
  'ngx-progressbar': 'node_modules/ngx-progressbar/bundles/ngx-progressbar.umd.js',
}

Here is a working plunker.

Usage

Import NgProgressModule in the root module

import { NgProgressModule } from 'ngx-progressbar';

@NgModule({
  imports: [
    // ...
    NgProgressModule
  ]
})

In your template

<ng-progress></ng-progress>

Add NgProgress service wherever you want to use the progressbar.

import { NgProgress } from 'ngx-progressbar';

@Component({
 /**  */ 
})
export class SomeComponent {
  
  constructor(public ngProgress: NgProgress) {
  }
  
  ngOnInit(){
      /** request started */
      this.ngProgress.start();
      this.http.get(url).subscribe(res){
          /** request completed */
          this.ngProgress.done();
      }
  }
}

NgProgress Service:

• NgProgress.start() Shows the progress bar

• NgProgress.set(n) Sets a percentage n (where n is between 0-1)

• NgProgress.inc(n) Increments by n (where n is between 0-1)

• NgProgress.done() Completes the progress

NgProgress Component:

<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1"
             [speed]="200" [showSpinner]="false" [direction]="'rightToLeftIncreased'"
             [color]="'red'" [trickleSpeed]="250" [thick]="false" [ease]="'linear'"
></ng-progress>

• [minimum]: between 0.0 to 1.0.

Progress initial starting value, default 0.08

• [maximum]: between 0.0 to 1.0.

Progress maximum value, default 1.0

• [ease]: Any easing function

Progress animation ease, default linear.

• [speed]: in milliseconds.

Transition speed, default 300.

• [trickleSpeed]: in milliseconds.

Progress trickling speed, default 300.

• [direction]: leftToRightIncreased, leftToRightReduced , rightToLeftIncreased, rightToLeftReduced.

Progressbar direction for LTR and RTL websites, default: leftToRightIncreased.

• [positionUsing]: marginLeft, translate, translate3d.

Positioning method, default: marginLeft

• [color]: any color format #1eb77f, brown, rgb(30, 183, 127).

Set the progressbar color, default: #29d

• [showSpinner]: boolean

Display the spinner, default: true.

• [thick]: boolean

A thicker size of the progressbar, default: false.

• [toggle]: boolean

Toggle the progressbar (alternate to start/done), . default false.

Automagic loading bar

If you only need a progressbar for multiple requests, there is a simple plug and play provider. It does the trick.

For Http

import { BrowserXhr, HttpModule } from '@angular/http';
import { NgProgressModule, NgProgressBrowserXhr } from 'ngx-progressbar';

@NgModule({
 providers: [
   // ...
   { provide: BrowserXhr, useClass: NgProgressBrowserXhr }
 ],
 imports: [
   // ...
   HttpModule,
   NgProgressModule
 ]
})

For HttpClient (Angular >= 4.3)

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgProgressModule, NgProgressInterceptor } from 'ngx-progressbar';

@NgModule({
 providers: [
   // ...
   { provide: HTTP_INTERCEPTORS, useClass: NgProgressInterceptor, multi: true }
 ],
 imports: [
   // ...
   HttpClientModule,
   NgProgressModule
 ]
})

And just put the component in the template

 <ng-progress></ng-progress>

The progress will start and complete automatically with your HTTP requests. no need to use NgProgress service to call start()/done() manually.

Issues

If you identify any errors in the library, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

Credits

Inspired by NProgress.js by Rico Sta. Cruz.

Changelog

2.1.0

Broken Release