Nondeterministic Programming Methodology

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

    2.2.0 • Public • Published


    Build Status npm version CodeClimate Codacy code style: prettier semantic-release license Donate

    NgxProgress is customizable Angular library for showing a progress bar during http request and/or routing change (or all you want) and prevent user interaction.


    Please read the changelog


    If you use npm

    npm install @kken94/ngx-progress --save

    If you use yarn

    yarn add @kken94/ngx-progress


    Choose the most suitable module for you.

    There are two modules:

    • NgxProgressModule (manage progress bar by yourself)
    • NgxProgressHttpModule (import progress bar and intercept http requests)

    Warning: to use http module import that in your app.module.ts, then import NgxProgressModule where you want to use progress bar.

    import { NgxProgressHttpModule } from '@kken94/ngx-progress';
      declarations: [AppComponent],
      imports: [
      bootstrap: [AppComponent],
    export class AppModule {}

    and place it into the element you want to cover.

    Note: If you want to use overlay be sure that the parent element has position:relative Overlay works with position:absolute, top:0, left:0

    <div style="position: relative">


    • NgxProgress supports multiple requests. If during the bar progress another request is fired, bar will not reset and keep going until all requests are completed.
    • NgxProgress can be instantiated multiple times. Only the deepest one will be displayed

    Requests filtering

    You can filter the HTTP requests that would like to be avoided by the interceptor by providing an array of regex patterns:

      import { NgxProgressHttpModule } from '@kken94/ngx-progress';
        declarations: [AppComponent],
        imports: [
          NgxProgressHttpModule.forRoot(['auth', '[a-zA-Z]']),
        bootstrap: [AppComponent],
      export class AppModule {}



    Input Description Default value
    color #0984e3
    showSpinner true
    showBar true
    indeterminate Indeterminate style like Material false
    barHeight 1px
    spinnerDiameter 10px
    initialValue From 1 to 100 undefined
    overlay Show overlay that prevent user click true
    overlayValue From 0 to 1 1
    spinnerSpeed From 1 to 10 4


    NgxProgress provides also some emitters.
    You have to inject NgxProgressService and subscribe end$ or start$

    Manually show and hide progress

    In NgxProgressService there are four methods:

    • start(): start bar if no request is in progress or add new request to queue of the bar already shown
    • end(): complete the bar if all requests are finished
    • reset(): force bar to start from zero
    • terminate(): force bar to terminate even if some requests are in progress

    Enable and disable progress bar

    In NgxProgressService:

    • enable(): enable bars if it has been previously disabled
    • disable(): disables all the bars that will not be shown until the next enabling

    and provide isEnabled variable to know if progress bar is enabled.
    Enabled by default.


    This project is licensed under the MIT License - see the file for details


    Offer me a coffee 😁



    npm i @kken94/ngx-progress

    DownloadsWeekly Downloads






    Unpacked Size

    201 kB

    Total Files


    Last publish


    • kken94