Narcoleptic Pasta Manufacturer

    This package has been deprecated

    Author message:

    This package is deprecated, install 'ngx-progressbar' instead!

    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    npm Build Status npm

    Angular Progressbar

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

    Table of Contents

    ## Installation

    Install it with npm

    npm install ng2-progressbar --save


    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';
    imports: [

    In your template


    Add NgProgressService wherever you want to use the progressbar.

    import {NgProgressService} from "ng2-progressbar";
     /**  */ 
    constructor(private pService: NgProgressService) {
          /** request started */
              /** request completed */

    NgProgressService options (functions):

    • NgProgressService.start() Shows the progress bar

    • NgProgressService.set(n) Sets a percentage n (where n is between 0-1)

    • 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'"
    • [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

    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';
      providers: [
        { provide: BrowserXhr, useClass: NgProgressCustomBrowserXhr } ,

    The progress will start and complete automatically with your HTTP requests. no need to use NgProgressService to call start()/done() manually.

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

    ## Credits

    Inspired by NProgress.js by Rico Sta. Cruz.

    ## License



    npm i ng2-progressbar

    DownloadsWeekly Downloads






    Last publish


    • murhaf