Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Position loading indicator in the center of the screen

How can I position my loading indicator in the center of the screen. Currently I'm using a little placeholder and it seems to work fine. However, when I scroll down, the loading indicator stays right in that predefined position. How can I make it follow the scrolling so that it always sits on top??

#busy {     position: absolute;     left: 50%;     top: 35%;     display: none;     background: transparent url("../images/loading-big.gif");     z-index: 1000;     height: 31px;     width: 31px; }  #busy-holder {     background: transparent;     width: 100%;     height: 100%;         } 
like image 508
Frank Vilea Avatar asked Jun 06 '11 17:06

Frank Vilea


1 Answers

use position:fixed instead of position:absolute

The first one is relative to your screen window. (not affected by scrolling)

The second one is relative to the page. (affected by scrolling)

Note : IE6 doesn't support position:fixed.

like image 199
Kraz Avatar answered Sep 17 '22 02:09

Kraz