CSSだけで作る円形回転型プリローダーです。プリローダーとは、元々フラッシュムービーのデータを転送している最中であることをユーザーに知らせるものでしたが、最近はフラッシュムービーに限らずその他のデータ転送中にも使われています。今回のプリローダーは、Windowsで使われているスピニングローダーなどと似た動きが特徴的だったので掲載させていただきました。

実装：オリジナルのプリローダー背景指定が「position:absolute」や「top:0px;bottom:0px」などを使っているため、サンプル画面に表示する際に全体をbox（id="main"のdiv）で囲っています（CSS部分はオリジナルをそのまま使用）。

htmlのソース

<div id="main">
	<div class="holder">
  		<div class="preloader">
    			<div></div><div></div><div></div><div></div><div></div>
      			<div></div><div></div><div></div><div></div><div></div>
    		</div>
	</div>
</div>