Waitbar in javascript for HTML

Hello,

I wrote a little form with a submit button. When the user clicks on submit, a javascript function is executed. That function makes some expensive queries and needs 5-10 seconds before it finishes. Therefore I would like to show an animated gif mimiking a waitbar while the function is calculating. My problem is that when I do that, he first executes the function (5-10 secs), then shows the waitbar, then shows the results... Is there a way to force the display of the waitbar before he begins (and during) the execution?

Thank you for your help!

François

If you use a wait while loading (or whatever) script like this:-

<style>
.styling{
background-color:black;
color:red;
font: bold 24px MS Sans Serif;
padding: 6px;
}
</style>

<br><br>
<center>
<span id = "a" class = "styling"></span>
</center>

<script type = "text/javascript">
var num = 0;
var tim;
var txt = "Loading, please wait ........";
document.getElementById("a").innerHTML = txt;
function showLoad() {
num ++;
if (num == 5) { // erase after 5 seconds, adjust to suit
document.getElementById("a").style.display="none";
window.clearTimeout(tim);
}
else {
tim = window.setTimeout("showLoad()", 1000);
}
}

</script>

then

onsubmit = "showload(); yourOtherFunction();"