YouTube like top attached progress bar to show $http requests in progress (automatic)


When you include thatisuday.ng-http-progress module to your app's dependencies, you will automatically get progress bar whenever you send ajax requests through $http service.

You can change the background color and other options in config block using $httpProgressOpsProvider provider of ng-http-progress module.

In general, whenever your app send one or more $http requests, progress bar will show up and progress will start. At each second, progress bar width will increment by 5% until it reaches 90%. At 90% progress, progress bar will pause and stay like that until all ajax requests finishes. When all ajax requests finishes, progress bar will reach 100% progress and disappear. If all ajax requests finishes before progress reaches 90%, it will jump to 100% and disappear. You can change pause value of 90% to any number between 0 - 100 in config phase.

It consumes only 2kb (gzipped) and it's very hackable.

bower install ng-http-progress

npm install ng-http-progress

include ng-http-progress.js and ng-http-progress.css from dist directory.

angular
.module('demo', ['thatisuday.ng-http-progress'])
.config(function($httpProgressOpsProvider){
	$httpProgressOpsProvider.setOps({
		background: '#b91f1f',
		startAt : 0,
		autoPauseAt : 90,
		http : true
	});
})

all above values are default values, you can avoid any options or entire config block if you want.

use startAt : 30 for more realistic effect. Check preview.

If you wish to show progress bar other than just $http requests, then you can use events to show/hide/pause/resume progress bar. Ex. $rootScope.$emit('$httpProgressStart');

You can build this directive with your own customization using gulp.

1. Go to repository's parent directory and install all node dev dependencies using npm install --dev.
2. Make sure you have gulp install globally. Else use npm install -g gulp to install gulp globally.
3. All css for this repository has been generated using sass (.scss), so you need to spend 5 mins to learn basics of sass.
4. To build or watch the changes, use command gulp build or gulp watch

1. Please create an issue if you need some help or report a bug.
2. Take a pull request to add more features or fix the bugs. Please mention your changes in the PR.
3. Please make sure you recommend good practices if you came/come across any or if something could have been better in this module.