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 !

What we’ll do:
- generate a simple Angular 4 app
- install the ngx-progressbar package in our app
- import the NgProgressModule to our app
- add our custom tag to the app template
- simulate a slow http and get some sample json data
- explore the service options that ngx-progressbar provides
- explore the template options that ngx-progressbar provides
- 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 pbaInstall 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 -oImport 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:
<ng-progress></ng-progress>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:
.start()to display the progress bar
.set(n)to set a percentage completion as a fraction
.inc(n)to increment the progress by a fraction
.done()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 !

