Is it possible to set the cursor to &#39;wait&#39; on the entire html page in a simple way? The idea is to show the user that something is going on while an ajax call is being completed. The code below shows a simplified version of what I tried and also demonstrate the problems I run into:

1. if an element (#id1) has a cursor style set it will ignore the one set on body (obviously)  
2. some elements have a default cursor style (a) and will not show the wait cursor on hover  
3. the body element has a certain height depending on the content and if the page is short, the cursor will not show below the footer

The test:

    &lt;html&gt;
        &lt;head&gt;
            &lt;style type=&quot;text/css&quot;&gt;
                #id1 {
                    background-color: #06f;
                    cursor: pointer;
                }
                
                #id2 {
                    background-color: #f60;
                }
            &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;div id=&quot;id1&quot;&gt;cursor: pointer&lt;/div&gt;
            &lt;div id=&quot;id2&quot;&gt;no cursor&lt;/div&gt;
            &lt;a href=&quot;#&quot; onclick=&quot;document.body.style.cursor = &#39;wait&#39;; return false&quot;&gt;Do something&lt;/a&gt;
        &lt;/body&gt;
    &lt;/html&gt;

Later edit...  
It worked in firefox and IE with:  

    div#mask { display: none; cursor: wait; z-index: 9999; 
    position: absolute; top: 0; left: 0; height: 100%; 
    width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}
    
    &lt;a href=&quot;#&quot; onclick=&quot;document.getElementById(&#39;mask&#39;).style.display = &#39;block&#39;; return false&quot;&gt;
    Do something&lt;/a&gt;

The problem with (or feature of) this solution is that it will prevent clicks because of the overlapping div (thanks Kibbee)


Later later edit...  
A simpler solution from Dorward:

    .wait, .wait * { cursor: wait !important; }

and then 

    &lt;a href=&quot;#&quot; onclick=&quot;document.body.className = &#39;wait&#39;; return false&quot;&gt;Do something&lt;/a&gt;

This solution only shows the wait cursor but allows clicks.



All Dynamic Css Solutions on Gang of Coders

Total of 1 Dynamic Css Solutions

Wait cursor over entire html page