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

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

Automagic loading bar

If you only need a progress for REST (XHR) request, there is a simple plug and play provider. It does the trick.

import { NgProgressCustomBrowserXhr } from "ng2-progressbar";

@NgModule({
  // ...
  providers: [
    /// ...
    { provide: BrowserXhr, useClass: NgProgressCustomBrowserXhr } ,
    /// ...
  ],
  // ...
})

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.

## 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! Automagic progress is WIP, you might encounter it doesn't reflect flawlessly responses, it is a WIP.

## Author

Murhaf Sousli

## Credits

Inspired by NProgress.js by Rico Sta. Cruz.

## License