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>

 

 

引用と参考;https://codepen.io/animatedcreativity/pen/OjBPQJ
戻るボタン