【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装！

画像を使わずに、スタイルシートだけで実装するローディングのアニメーションを考えてみました。

まずはサンプルをご覧ください。

サンプル：https://on-ze.com/demo/css3-loading/

クルクル回るローディングのアニメーションは、多くの場合GIF画像を使って実装しますが、上のリンク先で紹介しているのは完全にCSSのみで動かしています。

具体的には次のような HTML ＋ CSS で再現しています。

HTML

<div class="loading">
<i><i><i><i><i><i><i><i><i><i><i><i>
</i></i></i></i></i></i></i></i></i></i></i></i>
</div>

ここでは「i」要素を12個並べていますが、これが点滅する1つ1つの楕円を構成しています。

CSS

.loading {
font-size:48px;
position:relative;
height:1em;
width:1em;
padding-left:0.45em;
overflow:hidden;
margin:0 auto;
	-webkit-animation:loader-rotate 0.5s steps(12) infinite;
	-moz-animation:loader-rotate 0.5s steps(12) infinite;
	-ms-animation:loader-rotate 0.5s steps(12) infinite;
	-o-animation:loader-rotate 0.5s steps(12) infinite;
	animation:loader-rotate 0.5s steps(12) infinite;
}

.loading i {
display:block;
position:absolute;
height:0.3em;
width:0.1em;
border-radius:0.05em;
background:rgba(0,0,0,0.8);
transform:rotate(-30deg);
transform-origin:center 0.5em;
}

@-webkit-keyframes loader-rotate {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@-moz-keyframes loader-rotate {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@-ms-keyframes loader-rotate {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@-o-keyframes loader-rotate {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@keyframes loader-rotate {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

スタイルシートは上記のとおり。
「font-size」の値を変えることで、サイズを調整できるようになっています。

コピペで再現できるので、ぜひご利用ください。

サンプル：https://on-ze.com/demo/css3-loading/