Let’s add a progress bar to Angular 4 apps using ngx-progressbar

Today we’re going to add a progress bar to our Angular 4 app using the great ngx-progressbar package from @MurhafSousli, and straight up: kudos to him for his work !

Sponsored by letsboot.com

What we’ll do:

  1. generate a simple Angular 4 app
  2. install the ngx-progressbar package in our app
  3. import the NgProgressModule to our app
  4. add our custom tag to the app template
  5. simulate a slow http and get some sample json data
  6. explore the service options that ngx-progressbar provides
  7. explore the template options that ngx-progressbar provides
  8. use the Automagic loading bar

Generate a simple Angular 4 app

You need to have angular-cli in order to follow these exact steps, but you can follow the code without it if you don’t use the ng commands.

ng new progressbar-app —-prefix pba

Install the ngx-progressbar package in our app

Once our app is created, we open our project folder in Visual Studio Code (or your favorite editor), we then run the npm installation command and finally open the app in our local browser to check it’s running correctly:

cd progressbar-app
npm install ngx-progressbar --save
ng serve -o

Import the NgProgressModule to our app

In app.module.ts file, we need to import the NgProgressModule (line 4) and add it to the imports of NgModule() (line 15), we also import the HttpModule and add to NgModule():

Add our custom tag to the app template

We now add the ng-progress tag to our template:


Adding the tag like this will give us the default options, for a complete list of options you can visit the original page. Here we only show a few options for illustration purposes while we keep the default for the others:

Simulate a slow http and get some sample json data

In order to fake a slow connection and a get request to a json server, we create a const variable in the ngOnInit() that accesses;
slowwly.robertomurray for the fake slow connection and;
jsonplaceholder for the json data:

const sampleUrl = ‘http://slowwly.robertomurray.co.uk/delay/3000/url/https://jsonplaceholder.typicode.com/posts/1';

Explore the service options that ngx-progressbar provides

The service options that NgProgressService provides are:


to display the progress bar


to set a percentage completion as a fraction


to increment the progress by a fraction


to complete the progress

Here we simply use some setTimeout() functions to illustrate the versatility of this package (this setTimeout() would of course never be used in production):

Explore the template options that ngx-progressbar provides

The full list of template options provided by ngx-progressbar covers everything from colour and progress direction to speed and position.

Use the Automagic loading bar

This package also provides a great automagic loading bar which you don’t even need to start or stop; just import NgProgressBrowserXhr and BrowserXhr to your app.module.ts, then add them to your NgModule providers and that’s it !

Et voilà ! Happy coding and follow me on twitter, medium, and LinkedIn for more, also check out letsboot.com for more great content!

I also want to say that I hope this article brings more visibility to the @MurhafSousli for his awesome ngx-progressbar work. Kudos to @MurhafSousli for his great work!

What’s Next? We’ll be looking at other awesome components and bringing you short tutorials to get them running in no time !
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.