ng2-progressbar

Angular 2 Progressbar

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

Table of Contents

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

## Installation

Install it with npm

npm install ng2-progressbar --save

## 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

• NgProgressService.colors = [color1, color2, color3, ...] if presented, animates the progress color with colors array

• NgProgressService.colorsInterval = 500 progressbar colors transition speed in ms

NgProgressComponent options (inputs):

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

• [minimum]: 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.

• [trickle]: boolean

Auto trickle the progressbar, default true

• [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!

## Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

## Credits

Inspired by NProgress.js by Rico Sta. Cruz.

## License

Changelog

1.0.3

• Improvement: Uses OnPush change detection strategy on the outer component to improve performance.