The simplest way to put a loading bar in your angularJS app is to use angular-loading-bar. It has all kinds of configurable stuffs. I cant think of any other reason not to use this and brewing your own loading bar implementation is really sort of wasting your time.

But, for learning purposes, to put a loading indicator to a service without using http interceptors, this is a crude and easy way.

This wordpress codepen plugin doesnt display what it should be displaying but I’m too tired to troubleshoot wtf is going on, so just click on it or something to go to the actual codepen page (http://codepen.io/mkhairul/pen/PPPgpp).