★ 今日はこんな記事も読まれています ★

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

HTML/CSS

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

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

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

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

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

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

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

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

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 を使っています。

2.gif アニメ

3.Font Awesome spinners

4.Font Awesome 5 の animated


Loading
Loading…

Loading

 

1.CSSだけで作ったもの

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

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; /* 画像のサイズ指定しているだけです */}

3.Font Awesome spinner

3では 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; */
}

4.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” を加えます。

  • 遅い faa-flash faa-slow
  • 通常 faa-flash
  • 早い faa-flash faa-fast

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

通常のセットには回転させる “fa-spin” が含まれていますが、FAA には “faa-spin” というのものが用意されています。同じ回転ですが、”faa-spin” は速度を変える事もできるなど、若干異なるところがあります。ただ、ふつうに回転させるだけなら、”fa-spin” で十分でしょう。


Loading
Loading…

Loading

(4番目の表示幅を広くしたものを再掲)

Font Awesome Animatiom も CSS のスタイルの塊なので、タグで括った文字に対してアニメーション効果を適用することもできます。ただ、位置が変わる系統のアニメーション効果は、アイコンとセットで使わないと適切に機能しません。

例えば二行目の小さい “Loading” には、一番上の通り過ぎるアイコンと同じアニメーション効果、”passing” を適用しています。しかし横には流れず点滅しているだけ。position が初期値なので動くことはできないけれど、フェードアウト効果だけは機能している状態です。CSS で position: absolute にすると流れるようになります。

FAA は通常の FA とは別に読み込まなければいけない手間はありますが、ファイルの管理なく多彩な表現ができるので使わない手はないです。ただ、Wordpress でテーマが FA 4 のままだとめんどくさいことになるかもしれません。

◆ HTML

<div class="loading-flexbox">
<div class="load-animate-fa"><i class="fas fa-braille fa-2x animated faa-passing"></i>
<i class="animated faa-passing">Loading</i>
<i class="far fa-chart-bar fa-2x faa-flash animated"> Loading...</i><i class="fas fa-spinner fa-2x faa-spin animated"></i>
<i class="faa-passing animated fa-2x">Loading</i>

</div>
</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; */
}
.load-animate-fa{text-align:center;color:#ddd;/* 色をつけてセンタリングしています。複数行にまたがらないのならテキスト中央寄せは不要・フォント色も親で定義しているなら不要 */}

“load-animate-fa” は文字に色を付けてセンタリングをしています。複数行にまたがっていると、長い行に影響されて中寄席されないためです。色は親要素で指定して配置も特に不要なら、”load-animate-fa”は必要ありません。”loading-flexbox” とアイコンだけで動きます。