ng-http-progress

Angular $http Progress Bar

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

---

How does it work?

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.

---

Install

bower

bower install ng-http-progress

npm

npm install ng-http-progress

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

---

Config / Options

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

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

option	value	role
background	hex/rgba	background color of progress bar
startAt	0 - 100	start progress bar with initial progress
autoPauseAt	0 - 100	where progress bar will pause until requests resolve
http	true/false	automatic show/hide progress bar for $http requests

---

Events

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');

event name	emit from	role
$httpProgressStart	$rootScope	show/start progress bar
$httpProgressPause	$rootScope	pause progress bar
$httpProgressResume	$rootScope	resume progress bar
$httpProgressRestart	$rootScope	restart progress bar
$httpProgressStop	$rootScope	stop/hide progress bar

---

Build on your own

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

---

Contributions and Bug reports

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.