はじめに
こんにちは！作って学ぶWeb制作の初級編です。
今回はFontAwesomeのアイコンを使ってHTML・CSS・JavaScriptでローディング画面を実装していきます。
ではさっそく今回作るもののデモと仕様を確認していきましょう。
デモ
“ページを再読み込みする”ボタンを押すとローディングが再生できます。
仕様
今回は以下の仕様をもとに実装を進めていきます。
ページの読み込み中に画面の中心にローディングアニメーションを表示する
回転させる要素はFontAwesomeを使用する
ページの読み込みが完了したらローディングを非表示にする
ローディングの非表示時にフェードアウトのアニメーションをつける
css、jsファイルは外部ファイルとしてhtmlで読み込みます。
【実践】ローディングを実装する
HTMLを準備する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ローディングアニメーション</title> <!-- fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- start loading --> <div class="loading-content"> <div class="loading-wrap"> <i class="fa-solid fa-circle-notch fa-4x fa-spin" style="color: #51a0db;"></i> </div> </div> <!-- end loading --> <!-- start main contents --> <main> <h1>作って学ぶWeb制作 初級</h1> <p>ローディング画面を作ってみましょう！！</p> </main> <!-- end main contents--> <script type="text/javascript" src="script.js"></script> </body> </html>
ソースコード ポイント解説
全体的な構成要素としてローディングを表示するloading-contentとページのメインコンテンツを用意しています。
８行目でfontawesomeをCDNで読み込んでいます。
回転する要素は16行目のアイコンで、サイズを大きくして回転アニメーションをつけたいのでfa-4xとfa-spinのclassを付与しています。
<i class="fa-solid fa-circle-notch fa-4x fa-spin" style="color: #51a0db;"></i>
フォントサイズ、カラー、アニメーションなどスタイルに関する設定はFont Awesomeのドキュメントページを参考にしてみてください。
ここまででできたhtmlをブラウザで表示すると以下のようになります。
つづいてcssでスタイルを追加していきます！
CSSでスタイルを追加する
* {
margin: 0;
padding: 0;
}
.loading-content {
position: fixed;
/* 要素を前面にする */
z-index: 100;
width: 100%;
height: 100vh;
/* 上下左右中央寄せ */
display: flex;
align-items: center;
justify-content: center;
/* 背景色の設定 */
background-color: #cbdeff;
}
/* 読み込み完了後に付与するスタイル */
.loading-content.loaded {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
/* レイアウト調整用 */
main {
padding: 20px;
}
ソースコード ポイント解説
12~15行目、loading-content要素内のアイテムは上下左右中央寄せにしたいので、子要素を水平方向と垂直方向に対して中央に持ってくるように指定します。
display: flex; align-items: center; justify-content: center;
21~25行目loadedでは、ローディングを非表示にするためのスタイルを指定しています。0.5秒かけてopacity:0;で透明度を0になるようにしています。
今回はtransitionプロパティを設定することでふわっと消えていく動きを実現しています。
Javascriptでローディングを非表示にする
最後に、ページ全体を読み込んだらローディング要素を非表示にする動きを実装していきましょう！
// 定数を定義する
const loading = document.querySelector('.loading-content');
// cssクラスを追加する関数
function hideLoading() {
loading.classList.add('loaded');
}
//画面読み込みが完了したら hideLoading を呼び出す
window.addEventListener('load', () => {
setTimeout(hideLoading, 1500);
})
ソースコード ポイント解説
10~12行目 画面読み込みが完了してから1.5秒後に hideLoading を呼び出します。
ローディングアニメーションを実装できるサイト
今回はfontawesomeを使用しましたが、簡単にローディングアニメーションを実装できるサイトもあるので参考にしてみても良いですね。
作りたい画面の雰囲気に合うものや好みの動きを取り入れると面白いと思います！
Single Element CSS Spinners
SpinKit
CSSPIN
まとめ
作って学ぶWeb制作の初級としてローディングを実装してみましたがいかがでしたか？
ページの読み込み時にローディングアニメーションを用いて、ユーザーを不安にさせないことは大切ですがアニメーションの表示時間が長すぎると逆にユーザーが離脱してしまう可能性もあります。
実装する際には、ユーザーの使い勝手を考えて時間や見せ方も調整したいですね！
最後までお読みいただきありがとうございました。
