Loop is more important than rest?

Loop is more important than rest?

I want to execute simple code when user click on my button:
First: change my cursor to 'wait'
Next: execute loop
When loop is finished: change cursor back to 'default'
I wrote this code:
HTML:
<button type="button" id="gogogo">Go!</button>
<div id="progress">0</div>
JS:
var progress = document.getElementById('progress');
document.getElementById('gogogo').onclick = (function(){
document.body.style.cursor = 'wait';
for(var ii = 0; ii < 30000; ii += 1){
progress.textContent = ii;
}
document.body.style.cursor = 'default';
});
Live code here: http://jsfiddle.net/4Bz27/2/
And something is wrong. Loop execute first, and after that happen cursor
changing. Is it possible or any way related to asynchronous?