Wait cursor over entire HTML page

Dynamic cursor change

Besides the basic static approach, sometimes you need your cursor to be dynamic, indicating ongoing operations like Ajax calls. Here's how you can use jQuery or plain JavaScript to dynamically switch cursor states based on real events.

jQuery method

If you're a jQuery fan, you can add a 'wait' class to the HTML element on ajaxStart and remove it on ajaxStop. Here's how:

// Here's a little jQuery magic for you
$(document).ajaxStart(function() {
  $('html').addClass('wait'); // Class attendence: 'wait' - present!
}).ajaxStop(function() {
  $('html').removeClass('wait'); // 'wait' can leave the classroom now
});


Now you need some CSS to bring it to life:

// Everybody in line! That's right, no pushing
html.wait, html.wait * {
  cursor: wait !important; // 'Wait' is the new 'in'
}


This ensures the wait cursor stays on during ongoing Ajax operations — like a clingy friend that won't leave your side. The !important helps override any other cursor styles set on different elements.

Plain JavaScript way

If you're not into jQuery, worry not, you can do this with plain JavaScript:

// Just a closer walk with JavaScript
document.addEventListener('ajaxStart', function() {
  document.documentElement.classList.add('wait');  // 'Wait' enters the ring!
});
document.addEventListener('ajaxStop', function() {
  document.documentElement.classList.remove('wait');// And 'wait' leaves the fight!
});


Same CSS, same result, no jQuery. Like going to different restaurants but ordering the same meal.

Keeping UX in mind

Changing the cursor to wait shouldn't impede user interaction. Let's not disable any clickable elements purely because of a loading state. That'd be like shutting down a store because there's a delivery truck unloading stock.

Cross-browser handling and fallbacks

If you're using jQuery, keep some good old fallback handy for versions before 1.9 because the event handler APIs might differ. Also, always double-check your code across different browsers. You don't want Firefox feeling left out while Chrome plays with the new toy.

Complex content considerations

Dealing with iframes or plug-in content, keeps in mind that these elements might not follow the parent page's rules. They're like teenagers — you need to set cursor individually for these elements based on their behavior.

Dealing with short pages

On dwarf pages where the content doesn't fill up the viewport, a good idea is to ensure body or html extend to the window's full height:

html, body {
  min-height: 100%; // Like.99 problems, but lack of min-height ain't one
}


Now the wait cursor will show up even in the bare space below the content. Useful little trick, just like a magician's bunny.

Deep diving: More use-cases

The masking div

There's another popular way to show a wait cursor — using a masking div:

<div class="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: wait;"></div>


This technique comes in handy when you need to block interaction, as this div effectively covers the page.

Maintaining user interaction

To maintain user interaction while displaying the wait cursor, consider setting a specific cursor to a specific div. That way, parts of your page remain usable:

.interactive-div {
  cursor: default; // 'Default' - your dependable friend
}


This way, the default cursor persists on interactive content, ensuring key page functionalities stay unaffected.