Sasa Sasa - 1 year ago 157
HTTP Question

angularjs spinner during http request

When I starting app for the first time, after login I make one http request to server and wait couple second for response while server make things done. While I am waiting I can click on some link and walk trough app. I want to disable this and make some loading gif across all page, but I don't know how to do that.

My Controller:

vm.starting = starting;
function starting() {
dataService.restartVersion().then(function (data) {


My Service

function restartVersion() {
return $'http://localhost/organization/restartVer', {
}).then(function(response) {

How to implement something in my code to show loading gif across all page?

Any helps?

Thanks in advance

Answer Source

In the controller, set and reset a flag.

function starting() {
    vm.starting = true;
      .then(function onSuccess(data) { = data;
    }).catch(function onReject(errorResponse) {
    }).finally(function() {
        vm.starting = false;

In the HTML, use the flag:

<div ng-show="vm.starting">
    <img ng-src="spinnerURL" />

<div ng-hide="vm.starting">

The vm.starting is set true when the XHR starts and cleared when the XHR completes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download