Angularjs Showing Loading spinner

Question

Here is my ajax request,

I wanted to show the loading spinner. I refered here but i am not clear in it.

I just wanted to show the spinner during the $http.post and hide after the post is done.

Something like angular.element('#mydiv').show() and angular.element('#mydiv').hide() inside the call. In which place shall i give that to show the #mydiv during the post was in progress.

Here is my call

$scope.doVerify={email:'',password:''};
    $scope.doVerify = function () 
    {
     email = $scope.verify.useremail;
     password = $scope.verify.password;
     $scope.data.show = false; 
     $http.post('VerifyUser', { email: email, password: password}).then(function (results) 
     {
     $scope.data.show = true
     if(results.data=='success')
     {
     $location.path('registration');
     }
     else
     {
     $scope.data.msg = 'Incorrect Password'
     }
     });
    };

Where shall i put the angular.element('#mydiv').show() and angular.element('#mydiv').hide() to the loader ?

Muhammad Reda · Accepted Answer · 2015-07-06 10:23:33Z

1

angular.element('#mydiv').show() needs to go before you make $http call and angular.element('#mydiv').hide() should go in success and error callbacks.

angular.element('#mydiv').show(); // show loading spinner
$http.post('VerifyUser', { email: email, password: password}).then(function (results) {
    angular.element('#mydiv').hide(); // hide loading spinner
});

answered Jul 6, 2015 at 10:23

Muhammad Reda

27.1k14 gold badges100 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

AngularAngularAngular Over a year ago

Can i do something like $('#mydiv').fadeOut(100); i.e., To make #mydiv appear and disappear slowly.. ?

Muhammad Reda Over a year ago

i believe yes, as long as you have jQuery in your app.

AngularAngularAngular Over a year ago

May i do that in angularjs itself ?

Muhammad Reda Over a year ago

No. angular is using jqLite but fadeIn and fadeOut are not one of its methods.

AngularAngularAngular Over a year ago

is there anything there, so that i can do something like appear slowly ?

|

prototype · Accepted Answer · 2015-07-06 10:25:02Z

1

I think that the best solution to do this is to add the spinner in the HTML like so:

<div ng-show="spinnerVisibility" class="spinner></div>

and then control the spinnerVisibility variable in the controller before/after making a post. Example:

$scope.spinnerVisibility = true;
$http.post('VerifyUser', { email: email, password: password}).then(function (results) {
    $scope.spinnerVisibility = false;
});

answered Jul 6, 2015 at 10:25

prototype

3,3232 gold badges31 silver badges43 bronze badges

2 Comments

AngularAngularAngular Over a year ago

thanks, may i make that div spinner to appear slowly like fadeout or something like that ?

prototype Over a year ago

Yeah sure - you can do that with CSS3. Simply append/remove a class that will do the fadeIn/fadeOut effect. Check this out stackoverflow.com/questions/24868844/…

Community · Accepted Answer · 2017-05-23 12:06:03Z

1

angular.element('#mydiv').show() needs to go inside the definition of your interceptor. Interceptors are pushed inside the config block of the angular module. Exactly the way the it has been done here.

angular.element('#mydiv').hide() needs to go inside the response of the $http service(inside the 'then' block).

The example you are referring is doing it exactly the way it should.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jul 6, 2015 at 10:30

Vaibhav Pachauri

2,6712 gold badges21 silver badges34 bronze badges

Comments

Rani Das · Accepted Answer · 2015-07-06 10:34:49Z

Here How you can show the spinner in your code. show or hide your img/icon whre the $scope.prograssing var sets.

$scope.doVerify={email:'',password:''};
        $scope.doVerify = function () 
        {
         email = $scope.verify.useremail;
         password = $scope.verify.password;
         $scope.data.show = false; 

    $scope.sendAjax = function() {
    $scope.prograssing = true; // show spinner here
    $http.post('VerifyUser', { email: email, password: password}).then(function (results) 
             {
             $scope.data.show = true
             if(results.data=='success')
             {
             $location.path('registration');
    $scope.prograssing = false;        // hide spinner when successful
             }
             else
             {
             $scope.data.msg = 'Incorrect Password';
    $scope.prograssing = false;        // hide spinner when unsuccessful
             }
             });
           };
$scope.sendAjax();
       };

Collectives™ on Stack Overflow

Angularjs Showing Loading spinner

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Linked

Related