Загрузка с помощью Ajax

Question

Я пытаюсь добавить изображение загрузки, пока работает Ajax. У меня уже есть это:

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

И это работает очень хорошо, но не помещает изображение туда, куда я хочу.

Есть ли способ поместить изображение загрузки точно по центру и перед всем? или я должен вставить div в положение, где я хочу, чтобы изображение было?

Большое спасибо!

Answer 1

Применение этих стилей к 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 */
}