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

NgProgressComponent options (inputs):

<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [ease]="'linear'"
             [speed]="'200'" [showSpinner]="'false'" [direction]="'rightToLeftIncreased'"
             [color]="'red'" [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.

• [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.1.1

• Use rxjs operators to imrpove code quality
• Remove extra unnecessory subjects which been used in previous versions
• Remove unnecessory style
• Use single subject for update progress state
• Move logic to the service and make components as dump as possible
• Improve animation
• Support AOT

Breaking Changes

• Coloring animation is deprecated
• [trickle] input is deprecated