Set The Cursor To Wait During AJAX Loading - jQuery waitforit

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.

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.

  • Publication date: 21.11.2018
  • Source