Question

I am using jquery ajax and i want to display loader gif image when ajax is working. The loader appears correctly, however when the user scrolls or resizes the window while the loader is showing the loader moves off the screen or changes in size. I would like the loader to be fixed full screen, so that even if the user scrolls, it will not disappear from view.

Here is my code of jquery

  jQuery.ajaxSetup({  
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){     
     $('#loader').hide();
  },
  success: function() {}
});

and here is CSS of loader and its inner div

<style>
#loader
{
  background-color: #e8e8e8;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    display:none;
}
#center {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: -25px; // margin is -0.5 * dimension
    margin-left: -50px;
    z-index:5;
}



</style>

and html is as follow

<div id="loader" >
    <div id="center">
        <img src="images/loading.gif" />
    <div>
</div>

and here you can check my test page

Answer 1

This is how I would roughly center the loader image both horizontally and vertically using your markup.

body { 
     height:100%;
     margin:0;
     padding:0;
}

#center {
     width: 300px;
     height: 200px;
     position: absolute;
     top: 40%;
     left: 0px;
     width: 100%;
}

#loader {
     background-color: red;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     opacity: 0.5;
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
​

Heres a jsbin, showing the result.

http://jsbin.com/owaciy/2/

** UPDATE **

By replacing position:absolute with position:fixed, you should be able to achieve the desired result:

http://jsbin.com/owaciy/3