You can download NProgress.js from http://ricostacruz.com/nprogress/
If you’re doing the development in Visual Studio you can install the NProgress from the NuGet. It is very simple library. When you install NProgress you get all the other dependencies as well. NProgress has one simple CSS file which very easy to work with and handle.
It has 4 methods.
- NProgress.start() – to start the progress bar
- NProgress.set(0.5) – set the progress bar value; ranges from 0 to 1
- NProgress.inc() – increment the progress bar value.
- NProgress.done() – complete the load process and hides the bar
Let’s see how to use with Angular.js. Better practice is to use the progress bar in background operations or when the UI wait happens. In this sample I didn’t use $http service of the Angular I just used $scope.
The HTML goes like this.
Code for AppController.js
You can this is a very crud code sample, when request data from web service using $http service, you can call NProgress start and done methods appropriately.
I also did some color changes in the nprogress.css file and made the progress bar to red.
Hi, i’am trying to create the Same progress bar implementation but didn’t work.Unable to view the progress bar.. Could you please attached the sample code or clear the walktrhough steps.
you can reachme @ firstname.lastname@example.org
very good post it saves i was finding that kind of tutorial from 4 hours thanks for this tutorial i also learnt from another tutorial which tells how to display progress bar on page loads using jquery http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php