Display loader in angularjs

Question

I am just submitting one form.Its taking some time to return the response,on that time I need to show the loader.
This is my code

<div id="page-loading">
            <img style="display:none; margin:0 auto;"  src="~/images/loader.gif" />
        </div>

Script:

$scope.myFunc = function (leave) {
                            $scope.leaveDetails=leave;
                            console.log($scope.leaveDetails)
                            var requestHeaders = {
                                "content-type": 'application/json'
                            }
                            var httpRequest = {
                                method: 'POST',
                                url: '/Admin/sendRequest',
                                headers: requestHeaders,
                                data: $scope.leaveDetails
                            }
                            $http(httpRequest).then(function (response) {
                                $timeout(function () {
                                   $('#page-loading').fadeOut('slow');
                                }, 1000);

                                alert("successfully applied")
                                window.location= "/admin/Home";
                            })
                        }

But its not displaying the loader But taking more time to return the response.

If I give display:block here, <img style="display:none; margin:0 auto;" src="~/images/loader.gif" /> by default loader is coming but I need to show it only on submit of form.
Any suggestion?

You can use scope variable to show and hide image using ng-if or ng-show. — Jenny
– Jenny, Commented Jun 22, 2017 at 6:36
Please use angular in your angular application, not that jquery DOM stuff. It will save you a lot of trouble like this — devqon
– devqon, Commented Jun 22, 2017 at 6:38

xReeQz · Accepted Answer · 2017-06-22 06:37:14Z

3

Set a variable to scope like $scope.loading = true at the top of your method, and then in finally handler of http promise set it to false.

$http(httpRequest).then(...).finally(function() { $scope.loading = false; })

Based on that flag you can hide and show your loader.

<div id="page-loading" ng-if="loading">
    <img style="margin:0 auto;"  src="~/images/loader.gif" />
</div>

answered Jun 22, 2017 at 6:37

xReeQz

3201 silver badge7 bronze badges

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

5 Comments

user7397787 Over a year ago

why do I use .finally

xReeQz Over a year ago

In case if your request fails, you will want to hide the loader as well, won't you?

xReeQz Over a year ago

As soon as you redirect somewhere else, $timeout is extraneous there.

xReeQz Over a year ago

Create a plunker, and tell what's wrong with it, and we'll try to help you fix it.

xReeQz Over a year ago

Let us continue this discussion in chat.

stzoannos · Accepted Answer · 2017-06-22 06:36:38Z

2

I would use ng-if to show and hide the loader:

<div ng-if="loaderVisible">
     <img margin:0 auto;"  src="~/images/loader.gif" />
</div>

Then you can make loaderVisible = true in the beginning of your function and hide it again by making it false during the callback success.

answered Jun 22, 2017 at 6:36

stzoannos

9384 silver badges10 bronze badges

Comments

Rahi.Shah · Accepted Answer · 2017-06-22 06:37:40Z

1

You can use angular-busy below is link,

https://github.com/cgross/angular-busy

It's very simple to use no need of this all and if loader you not like then you can change loader CSS als

answered Jun 22, 2017 at 6:37

Rahi.Shah

1,31311 silver badges20 bronze badges

Collectives™ on Stack Overflow

Display loader in angularjs

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related