Maybe you could use the default loader and position this one in the center of your page. By using the css class MxClient_loader it's possible to style the loader.
.MxClient_loader {
}
With position:absolute you should not use margin to move the object around. Try using
.default .MxClient_loader {
width: 128px;
height: 15px;
float: right;
padding: 5px 10px;
background: transparent url(images/layout/ajax-loader.gif) no-repeat scroll center center;
position:absolute;
top: 250px;
left: 250px;
margin-left: 400px;
z-index:1;
}
Instead.
The way margin works is that it's going to move your element within its parent - in that case the header. Position: absolute; will remove the element from the flow, leaving it to you to tell it where to go by setting top, bottom, right or left attributes.
Here's a link that can help you understand CSS positioning
Hope that helped :)
Okay so it works when it is positioned in the header section but as soon as I add a margin to move it into the content section it disappears.
.default .MxClient_loader {
width: 128px;
height: 15px;
float: right;
padding: 5px 10px;
background: transparent url(images/layout/ajax-loader.gif) no-repeat scroll center center;
position:absolute;
margin-top : 250px;
margin-left: 400px;*/
z-index:1;
}