Question

I am trying to add a loading image while Ajax is working. I already have this:

    if(xml.readyState == 1) {
        divPrincipal.innerHTML = "<img src='/RH/images/loading.gif' />"
    }
    if(xml.readyState == 2) {
        divPrincipal.innerHTML = ""
    }

And it works very well, but it doesnt place the image where I want.

Is there anyway to put the loading image exactly on the center and in front of everything? or should I insert a div on the position where i want the image to be?

Thanks a lot!

Answer 1

Apply these styles to divPrincipal:

#divPrincipal {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background: #cccccc;
    background: rgba(255,255,255,0.5);
}
#divPrincipal > img {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -Xpx; /* where X is half the width of the image */
    margin-top: -Ypx; /* where Y is half the height of the image */
}