Angular Progressbar

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

Live Demo
Installation
Usage
Issues
Author
Credits
License

Install it with npm

npm install ng2-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 ng2-progressbar:

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

Here is a working plunker.

## Usage

Add NgProgressModule to NgModule imports array.

import { NgProgressModule } from 'ng2-progressbar';
 
@NgModule({
imports: [
    NgProgressModule
  ]
})

In your template

<ng-progress></ng-progress>

Add NgProgressService wherever you want to use the progressbar.

import {NgProgressService} from "ng2-progressbar";
 
@Component({
 /**  */ 
})
constructor(private pService: NgProgressService) {
  }
  
  ngOnInit(){
      /** request started */
      this.pService.start();
      this.http.get(url).subscribe(res){
          /** request completed */
          this.pService.done();
      }
  }

NgProgressService options (functions):

NgProgressService.start() Shows the progress bar
NgProgressService.set(n) Sets a percentage n (where n is between 0-1)
NgProgressService.inc(n) Increments by n (where n is between 0-1)
NgProgressService.done() Completes the progress

NgProgressComponent options (inputs):

<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 initial starting value, default 0.08

[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 (BETA)

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

import { NgProgressCustomBrowserXhr } from 'ng2-progressbar';
 
@NgModule({
  
  providers: [
    { provide: BrowserXhr, useClass: NgProgressCustomBrowserXhr } ,
  ],
})