フェードイン・フェードアウトする読み込み中アニメーションを作る方法
フェードイン・フェードアウトする読み込み中アニメーションを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、ページやコンテンツの読み込み中にローディング画面を表示し、読み込み完了後に自然なフェードアウトでコンテンツへ切り替えるアニメーションを実装します。急に画面が切り替わるのではなく、徐々に表示・非表示が切り替わるため、より滑らかで見やすい画面遷移を実現できます。
管理画面や会員サイト、ECサイトの商品一覧、検索結果画面など、データの読み込みに時間がかかる場面で利用しやすいサンプルです。読み込み中の状態を利用者へ分かりやすく伝えられるため、画面が停止しているような印象を与えにくくなります。フェードアウト後はコンテンツだけが表示されるため、自然な切り替えを体験できます。
タイトルやメッセージはHTMLから変更でき、CSSではローディング画面の背景色、文字色、スピナーの色、表示サイズ、フェード時間などを自由に調整できます。JavaScriptでは表示時間を変更できるため、実際の読み込み処理へ組み込みやすく、初心者でも導入しやすい読み込み中アニメーションのサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「読み込み開始」をクリックすると、読み込み中アニメーションがフェードインし、処理完了後にフェードアウトします。
「読み込み開始」をクリックすると、読み込み中アニメーションがフェードインで表示され、約2秒後にフェードアウトして終了します。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>フェードイン・フェードアウトする読み込み中アニメーション</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 全体 -->
<div class="fade-loading-animation_wrap">
<!-- 表示エリア -->
<div class="fade-loading-animation_screen">
<!-- 読み込み完了後のコンテンツ -->
<div class="fade-loading-animation_content">
<div class="fade-loading-animation_title">
コンテンツ
</div>
<p class="fade-loading-animation_text">
「読み込み開始」をクリックすると、読み込み中アニメーションがフェードインし、処理完了後にフェードアウトします。
</p>
</div>
<!-- 読み込み中画面 -->
<div
class="fade-loading-animation_overlay"
id="fade-loading-animation-overlay">
<!-- スピナー -->
<div class="fade-loading-animation_loader"></div>
<!-- メッセージ -->
<p class="fade-loading-animation_message">
読み込み中...
</p>
</div>
</div>
<!-- 読み込み開始ボタン -->
<button
class="fade-loading-animation_button"
id="fade-loading-animation-button"
type="button">
読み込み開始
</button>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは読み込み開始ボタン、読み込み中画面、スピナー、読み込み完了後に表示するコンテンツを配置します。CSSでは各要素のデザインとスピナーの回転、読み込み中画面のフェードイン・フェードアウトを設定し、JavaScriptではボタン操作による表示切り替えを行います。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは読み込み中アニメーション全体を構成するファイルです。読み込み開始ボタン、読み込み中のメッセージ、スピナー、処理完了後に表示するタイトルや説明文を配置しています。表示する文章やボタンの文字を変更する場合は、このファイルを編集します。
style.cssは読み込み中画面のデザインを設定するファイルです。表示エリアの大きさ、背景色、余白、角丸、スピナーのサイズや色、回転速度、フェード時間などを変更できます。
script.jsは読み込み開始ボタンをクリックしたときの処理を設定するファイルです。読み込み中画面へis-showクラスを追加してフェードイン表示し、2秒後にクラスを削除してフェードアウトします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3つのファイルを同じ階層へ保存してください。そのあと、sample/index.htmlをブラウザで開きます。「読み込み開始」ボタンをクリックすると、読み込み中画面がフェードインし、スピナーと「読み込み中…」の文字が表示されます。約2秒後に読み込み中画面がフェードアウトし、元のコンテンツへ戻ります。
カスタマイズできる内容
index.htmlでは「コンテンツ」のタイトル、説明文、「読み込み中…」のメッセージ、「読み込み開始」のボタン文字を変更できます。検索処理、データ取得、フォーム送信など、実際に利用する処理に合わせた文章へ編集できます。
style.cssでは全体の横幅、表示エリアの高さ、背景色、余白、角丸、文字色、スピナーの大きさや色、フェード時間、回転速度を変更できます。script.jsでは読み込み中画面を表示する時間を変更できます。
数値調整
style.css
max-width:420px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
height:260px;
コンテンツ表示エリアの高さです。値を大きくすると縦に広がり、小さくすると低くなります。
padding:28px 20px;
全体の内側余白です。上下の28pxと左右の20pxを変更すると、内容と枠線の間隔が変わります。
border-radius:20px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
transition:opacity .8s ease, visibility .8s ease;
読み込み中画面のフェード時間です。0.8秒かけて表示・非表示を切り替えます。値を大きくするとゆっくり、小さくすると速くなります。
width:54px;とheight:54px;
スピナーの大きさです。両方を同じ値で変更すると、円形を保ったままサイズを調整できます。
border:5px solid #dbeafe;
スピナーの線の太さです。5pxを大きくすると太くなり、小さくすると細くなります。
animation:fade-loading-animation_spin 1s linear infinite;
スピナーの回転速度です。1秒で1回転します。値を大きくすると遅くなり、小さくすると速くなります。
script.js
setTimeout(...,2000);
読み込み中画面を表示する時間です。2000は2秒を表します。値を大きくすると表示時間が長くなり、小さくすると早くフェードアウトします。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:420pxによって画面幅に合わせて全体が縮小されます。また、画面幅640px以下ではpadding:24px 16px;へ変更して左右の余白を抑えているため、スマートフォン・タブレット・PCで利用できます。
コメント