CSSでページローディング状態の表示

CSSを使ったページローディング状態の表示方法。Ajaxを利用したサイトを作成する場合、初期データの読み込みやページ切替で時間がかかることがあり、瞬時にサイトからの応答がないとちゃんと動いているかどうか怪しく思ってしまうので、時間のかかる処理ではページがローディング中であることを示すことが一般的です。

gif画像のアニメーションを利用したものやcssで行うものがありますが、gifを試してみたらアニメーションがカクカクになってしまったので、ここではcssを使った方法について掲載しておきます。

HTML

<div class="page_loading_sample"></div>

CSS

.page_loading_sample {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border-top: 5px solid rgba(000, 000, 000, 0.2);
	border-right: 5px solid rgba(000, 000, 000, 0.2);
	border-bottom: 5px solid rgba(000, 000, 000, 0.2);
	border-left: 5px solid #eee;
	-webkit-animation: loading_animation_sample 0.6s infinite linear;
	animation: loading_animation_sample 0.6s infinite linear;
}
@-webkit-keyframes loading_animation_sample {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading_animation_sample {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

上記のサンプルでは、正方形のdiv要素に対して、3辺と1辺で色分けを行い、四隅を丸めた図形（border-radius:50%;で正円になる）を作成しています。その図形をアニメーション（keyframes）で360°回転させ、それを永遠（infinite）に繰り返しています。

あとは、このdiv要素の表示・非表示を切り替えてやればOKです。

コードを見て分かるように、CSSの場合は複雑なローディング表示はできなさそうなので、今回のサンプルのように単純なものになると思います。