/*this must be set so that the loading div can be height:100% */ html, body { height: 100% } /*this is what we want the div to look like when it is not showing*/ div.loading-invisible { /*make invisible*/ display: none; } div.loading-visible { z-index: 2001; display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; text-align: center; /*set the padding, so that the content of the div is centered vertically*/ padding-top: 25%; } div.loading-background { z-index: 2000; display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; /*in supporting browsers, make it a little transparent*/ background: #fff; _background: none; /*this line removes the background in IE*/ opacity: 0.3; -moz-opacity: 0.3; -ms-filter: "alpha(opacity=30)"; /* IE 8 */ filter: alpha(opacity = 30); /* IE < 8 */ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }