Set The Cursor To Wait During AJAX Loading - jQuery waitforit

File Size: 2.76 KB
Views Total: 2748
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Set The Cursor To Wait During AJAX Loading - jQuery waitforit

waitforit is a small jQuery plugin that sets the mouse cursor to Wait while performing AJAX requests in the document. Only works for window object.

How to use it:

1. Insert the latest version of jQuery library and the jQuery waitforit plugin into your web page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery-waitforit.js"></script>

2. Initialize the plugin on the window object and done.

$(function(){

  $(window).wait();

});

3. Config the delay & timeout in milliseconds.

$(function(){

  $(window).wait({
    delay: 500,
    timeout: 60000,
  });

});

3. Add an extra CSS class to the mouse cursor while loading.

$(function(){

  $(window).wait({
    cssClass: ''
  });

});

4. Append any content to the page while loading.

$(function(){

  $(window).wait({
    content: '<div id="loading">Loading...</div>'
  });

});

5. Execute your own functions when the loading starts and stops.

$(function(){

  $(window).wait({
    callbacks: {
      start: showWaitCursor,
      stop: hideWaitCursor
    },
    ajaxStartFunctions: [],
    ajaxStopFunctions: []
  });

});

This awesome jQuery plugin is developed by ossipoff. For more Advanced Usages, please check the demo page or visit the official website.