Desktop loader like Mobile loader

2
Hi there, I would like to have a loading image(gif) very similar to the mobile one when forms are loading, to appear on the desktop version when forms are loading instead of just the loader on the top right. I have a very limited JavaScript competency. I would like to perhaps add some javascript into the index-html page but have no idea what to use. One idea was to show an image with a z-index when the page is still loading but I don't know how to check the status of the form being loaded. Any help would be appreciated!
asked
3 answers
1

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 {

}

answered
1

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 :)

answered
0

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;

}

answered