asked on

Adding loader on page

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

Dorababu M

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

Dinesh Bali

ASKER

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.

Dinesh Bali

ASKER

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

Regards,

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial