JavaScriptAngularJSCustomizable Progress Bar for Angular | ngx-progress

Customizable Progress Bar for Angular | ngx-progress

An angular progress bar library that creates a customizable and flexible progress bar with an arrow to visualize the http request and / or the routing change while preventing user interaction.

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


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:absolutetop:0left: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 {}



InputDescriptionDefault value
indeterminateIndeterminate style like Materialfalse
initialValueFrom 1 to 100undefined
overlayShow overlay that prevent user clicktrue
overlayValueFrom 0 to 11
spinnerSpeedFrom 1 to 104


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 live demo and download the source code.

This awesome script developed by z3vin. Visit their official repository for more information and follow for future updates.

Saroj Meher
Saroj Meher
Howdy! Friends, I am Saroj Meher. I am an Artist. I do Painting on mediums like Acrylic, Watercolour, Oil etc. I have over 7 years of experience in WordPress. I am currently running 30+ website. I am specialized in WordPress and WooCommerce, WordPress Theme Customization and Theme Development. I can fix any kind of WordPress error/issue like PHP, CSS, Js issues and other Theme and Plugin related issues. Client's Satisfaction is my first priority.

Subscribe For More!

Subscribe to get the Latest Updates directly in you Email box.

Explore More


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I am a Lecturer (English & Sociology), a professional Artist, and a blogger. I do painting, sketches since my childhood. I am in the teaching for 10 years. In this teaching line, I have experience in teaching English at High School and College levels. I have also experienced teaching computer theory during the school teaching period. This is my personal web corner over the internet.

Quick Guides

7 Simple Steps To Start Your Blogging Journey