We help IT Professionals succeed at work.

Adding loader on page

Dinesh Bali
Dinesh Bali used Ask the Experts™
on
Hi,

I have page and on body tag I am calling the ajax call.
The process takes sometime. And I wanted to add loader to the page in the mean time loader process the request.

Please advise to add loader.

Thanks

</head>
<body><!-- <===== PLEASE NOTE THIS IS YOUR BODY TAG -->
<script>
    $.ajax({
        url: '/der/surface/userHasSession',
        data: { currURL: window.location.pathname + window.location.search },
        type: 'GET',
        xhrFields: { withCredentials: true },
        accept: 'application/json',
        async: false
    }).done(function (userdata) {
        console.log('Done');
    }).fail(function (jqXHR, textStatus, error) {
        console.log('Session Check Fail: ');
    });
</script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dorababu MSenior Software Engineer
Distinguished Expert 2018

Commented:
On calling the Ajax request show the loading image and on Done or fail hide it, you can check for various spinners here

https://www.jqueryscript.net/blog/Best-Loading-Spinner-Indicator-jQuery-Plugins.html

Author

Commented:
Hi,

Many thanks.

I have added a script from link provided as below.
https://www.jqueryscript.net/loading/Simple-jQuery-Loading-Spinner-Overlay-Plugin-Loader.html
I have added below file after downloading from the given URL;
jquery-loader.js

<head>
<script src="/js/jquery-loader.js" type="text/javascript"></script>
</head>
<body>

<script>
            $(this).loader('body');
</script>

<script>
    $.ajax({
        url: '/der/surface/userHasSession',
        data: { currURL: window.location.pathname + window.location.search },
        type: 'GET',
        xhrFields: { withCredentials: true },
        accept: 'application/json',
        async: false
    }).done(function (userdata) {
        console.log('Done');
    }).fail(function (jqXHR, textStatus, error) {
        console.log('Session Check Fail: ');
    });
</script>

<script>
	$.loader.close(true);
</script>

</body>

Open in new window


Loader is not working. Please advise. I need loaded on full body of the html.

Author

Commented:
Also, I wanted to show my text at the time of loading.
Please advise the solution.

Regards,
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
I think the first thing to do is tell jquery to start when the page loads. This is done with document ready https://learn.jquery.com/using-jquery-core/document-ready/

Then start your loader animation followed by your ajax request. When the ajax request is completed, close the spinner and show your results.

Simple Example to just load spinner https://jsbin.com/vezeponuzu/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
  $( document ).ready(function() {
   // start after the html loads
    
    //1 Show your spinner
    $('#content').html('<img id="loader" src="http://ajaxloadingimages.net/gif/image?imageid=dot-spinner&forecolor=000000&backcolor=ffffff">');
    
    // 2 load your content
    /*
        Ajax request
        
        close #loader after ajax
    */

  });
  </script>
</head>
<body>
  <div id="content"></div>

</body>
</html>

Open in new window


Using your ajax

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
  $( document ).ready(function() {
   // start after the html loads
    
    //1 Show your spinner
    $('#content').html('<img id="loader" src="http://ajaxloadingimages.net/gif/image?imageid=dot-spinner&forecolor=000000&backcolor=ffffff">');
    
    // 2 load your content
    $.ajax({
        url: '/der/surface/userHasSession',
        data: { currURL: window.location.pathname + window.location.search },
        type: 'GET',
        xhrFields: { withCredentials: true },
        accept: 'application/json',
        async: false
    }).done(function (userdata) {

   // close loader
       $('#loader).hide();

        console.log('Done');

    }).fail(function (jqXHR, textStatus, error) {

       // close loader
       $('#loader).hide();

        console.log('Session Check Fail: ');
    });

  });
  </script>
</head>
<body>
  <div id="content"></div>

</body>
</html>

Open in new window