I have a DIV for spinner:
<div id="spinner" style="display:none;z-index:100;position:absolute;top:50%;left:50%;margin-top:-50px; margin-left:-50px;">
<img src="..\spinner.gif" alt="Loading" />
</div>
The code document.getElementById("spinner").style.display = "block" changes the style of the spinner to block but the spinner div not showing:
document.getElementById("spinner").style.display = "block";
getAllStudents(); //this function gets data from MySQL tables and populate a table on the page
document.getElementById("spinner").style.display = "none";
Instead of adding display: none; after the function call,
try adding the code just before you start populating the table on page.
document.getElementById("spinner").style.display = "none";
Two Ideas:
src is incorrect, I've sometimes found it doesn't display anything, even with an alt = "Loading" tag. You might want to test the link it's displaying the image from to verify it works. (Don't just test the src link).src is correct, you could remove the image from <div id="spinner"/> and add it separately as <img id="spinner" src="..\spinner.gif" alt="Loading" /> and then you could have your <div show what you want.EDIT: (3 ideas now)
src attribute so all of the \ characters are replaced with /. I tried an image in my own script with src = "..\spinner.png" and it wouldn't even run, but doing src = "../spinner.png" did. Hopefully this solves your problem.