スクリプト不要のローディングアニメ　CSS・Fontawesome だけで十分かも

2018年8月16日2020年5月9日HTML/CSS

このサイトでは、グラフを動的に描画する javascript のライブラリ ”Highcharts.js” を使っています。キャプションや説明書きもテキストで表示しているため、自動翻訳でもきちんと表示されるというスグレモノ。海外からのアクセスにも勝手に対応できてしまって便利なのです。が、問題が一つ。

単純なグラフならほぼ一瞬で表示されるのですが、内容によっては描画がかなり遅れることもあり、グラフの存在に気づかれない可能性があること。せっかく作ったグラフなのに、存在に気づいてもらえないでは意味がない。

そんなわけでグラフ描画中のローディング画面を作ろうと思い立ったのですが、ちょっと悩んだのが Font Awesome のスピナーを spin で回転させるか、アニメ gif にするか。

スピナーというのはローディング中に画面のまんなかでクルクル回っている これです。

Font Awesome なら簡単。だけど、できることが少ない。gif は画像さえあれば凝ったものができる。せっかく作るのなら凝ったものにしたい。そう思って gif 動画を探していた時にふと目に止まったのが「css だけのロード画面 – nmm 実験室」というページ。

CSS だけで、こんなローディングアニメを作る方法が書かれています。

（中心線は中心を確認するための参照として引いているもの）

1. 好きな大きさのボックスを用意する
2. ボーダーの一部だけ濃淡をつける
3. ボックスの角を丸っこくする
4. 回転させる

４番目の回転させる部分が古いブラウザでは未対応なので、IE11以前のブラウザ対応が必要なら使えないのが唯一のネックです。何年か前の記事なので、今はこの方法を使っている人も多いのかもしれませんが、かっこいいし楽なのでこのサイトではこれを使わせてもらうことに。

◆上のグルグルローディング画面のHTML

load-spinner がくるくる回る円です。これを loading-1 という箱の中で回転させてます。

<div class="loading-1">
<div class="load-spinner"></div>
</div>

◆CSS

<style>
.loading-1{
background:#555;
opacity:0.7;
width:100%;
height:100%;/*親要素で高さを設定していないならこちらで高さ調整例）height:35vh;*/
}
.load-spinner {
display: inline-block;
position:relative;top:
calc(50% – 25px); /* lloading ボックスの真ん中 の位置から円のサイズの半分を引く*/
left:calc(50% – 25px); /* lloading ボックスの真ん中 の位置から円のサイズの半分を引く*/
width: 50px;height: 50px;
border: 6px solid rgba(200,200,200,0.4);
border-top-color: rgba(200,200,200,0.9);
border-radius: 50%;
animation: spin 1.2s linear 0s infinite;}
@keyframes spin { 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style>

position を使って位置を調整しています。ただ、ボーダーの太さを含めて計算するか、ボーダーの内側だけで計算するかの違いで中心がずれる可能性があります。古いブラウザへの対応を考えないのなら、flexbox を使うのが簡単かと思います。

◆CSS – flexbox

/*　flexbox を使ったCSS ローディングアニメ　*/
<style>
.loading-1-flex{
display: flex;
justify-content: center;
align-items: center;
background:#555;opacity:0.7;
width:100%;height:100%;/*親要素で高さを設定していないならこちらで高さ調整height:35vh;*/
}
.load-spinner-flex{
width: 50px;
height: 50px;
border: 6px solid rgba(200,200,200,0.4);
border-top-color: rgba(200,200,200,0.9);
border-radius: 50%;
animation: spin 1.2s linear 0s infinite;}
@keyframes spin { 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style>

もののついで、というわけでもないのですが、gif や Font Awesome 5 で使えるようになったアニメを使ってちょろっと作ってみました。いずれも flexbox を使っています。

１．CSSだけで作ったもの

ソースは上で紹介したものを参照してください。
２．gif アニメ

◆ HTML

<div class="loading-img"><img class="loading-gif" src="https://yaruzou.net/uploads/loading.gif" /></div>

◆ CSS

.loading-img{
display: flex;justify-content: center;
align-items: center;
color:#999;
width:100%;
height:100%;/*親要素で高さを設定していないならこちらで高さ調整 例）height:35vh;*/
}
.loading-gif{width: 50px;height:50px; /* 画像のサイズ指定しているだけです */}

３．Font Awesome spinner

３では spinner というアイコン を fa-spin で動かしています。loading-flexbox で真ん中に配置しているので、ただ好きなアイコンを置くだけ。fa-spin を使えばどのアイコンでも回転させられます。
◆ HTML

<div class="loading-flexbox"></div>

◆ CSS

.loading-flexbox{
display: flex;
justify-content: center;
align-items: center;
background:#555;
color:#999;opacity:0.7;
width:100%;height:100%;/* 親要素で高さを設定していないなら、こちらで高さ調整 例）height:35vh; */
}

４．Font Awesome の animated

これは Font Awesome Animation を使っています。標準でも回転させるためのクラス fa-spin が含まれていますが、Font Awesome 5 にはさらに発展させたアニメが定義されています。ただ、animation を使うには CSS の追加が必要になります。

標準のCSS 同様 Animation も CDN を利用できます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

使い方は Font Awesome の他のエフェクトと同じく、使いたいアイコンのクラスに ”animated + 効果”　を付け加えるだけ。効果の接頭辞は “faa-" です。

例えばアイコンを点滅させたければ、クラスに faa-flash animated をつけます。点滅速度を早めたければ、"faa-fast"、遅くしたければ “faa-slow" を加えます。

アニメ効果の一覧はFont Awesome Animationにあります。