Showing posts with label ngx-progressbar. Show all posts
Showing posts with label ngx-progressbar. Show all posts
ngx-progressbar

ngx-progressbar

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

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 NgProgressService wherever you want to use the progressbar.
 import {NgProgressService} from 'ngx-progressbar';  
 @Component({  
  /** */   
 })  
 export class SomeComponent {  
  constructor(public progressService: NgProgressService) {  
  }  
  ngOnInit(){  
    /** request started */  
    this.progressService.start();  
    this.http.get(url).subscribe(res){  
      /** request completed */  
      this.progressService.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 maximum value, default 1.0
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 NgProgressService to call start()/done() manually.

Credits

Inspired by NProgress.js by Rico Sta. Cruz.

Note: Special thanks to Murhaf Sousli
Contact: murhafsousli@gmail.com
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.