ロード中の画面をアニメーション表示させるには？調べてみた！

ページ読み込み中の白い画面、気になりませんか？

ローディングアニメーションの導入でユーザーの不安を解消！

Webページを開いたとき、数秒間真っ白な画面が続くと「ちゃんと読み込まれているのかな？」と不安になることはありませんか？
そんなときに役立つのがローディングアニメーション（ローダー）です。

ローダーを設置することで、ユーザーに「ページを読み込み中です」ということを明確に伝えることができます。
また、最近ではロゴやアニメーションを取り入れ、視覚的な演出としてもローディング画面を活用するケースが増えています。

今回は、複雑な処理なしで簡単に実装できるローディングアニメーションの方法を、HTML・CSS・JavaScriptを使ってご紹介します。
ぜひ、あなたのサイトにも取り入れてみてください！

ローダーとは？

ローダーとは、ページの読み込み中に一時的に表示されるアニメーションのことです。
多くの場合、企業ロゴやテキスト、GIFなどを表示させて、読み込み完了までの数秒間を演出します。

もともとは「読み込み中なのかフリーズしているのか」を見分ける目的で使われていましたが、現在ではブランディングやユーザーの興味を引くための演出として使われることも多くなっています。

実装方法

それでは、基本的な「ページ読み込み時に表示されるローダー」の実装手順を見ていきましょう。

1. HTMLの記述

まずは、ローダーとして表示する要素をHTMLに追加します。
ここではシンプルにテキストを中央に配置しますが、画像やアニメーションGIFを使うのもおすすめです。

html

<div class=”loader”>
<p class=”txt”>ローディング中</p>
</div>

2. CSSの記述

次に、ローダーの見た目を整えるためのCSSを記述します。
いくつかポイントがあります：

• position: fixed; … 画面に固定表示するため

• top: 0; / left: 0; … 画面左上から配置開始

• height: 100vh; … ビューポートの高さいっぱいに広げる

• z-index … 他の要素の上に表示させるため十分高い数値に

css

.loader {
position: fixed;
width: 100%;
height: 100vh;
background-color: #fff;
z-index: 555;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.loader .txt {
font-size: 45px;
font-weight: bold;
color: rgb(30, 50, 93);
}

3. JavaScript（jQuery）の記述

最後に、ローダーを一定時間後に非表示にするJavaScriptを記述します。
ここでは、ページ読み込み後に3秒待ってからローダーをフェードアウトさせる処理を行います。

js

$(function () {
function end_loader() {
$(‘.loader’).fadeOut(800); // 0.8秒で非表示に
}
$(window).on(‘load’, function () {
setTimeout(function () {
end_loader();
}, 3000); // 3秒後に実行
});
});

このコードでは、setTimeout()を使って3秒待機し、その後.fadeOut()でローダーをゆっくり非表示にしています。

これで実装完了！動作確認してみましょう。

すべてのコードを記述したら、ページをリロードして動作を確認してみましょう。
白い画面ではなく「ローディング中」の表示がされ、一定時間後にスムーズにページへ遷移するようになっていれば成功です。

【応用編①】要素を“ふわっ”と表示させるローディングアニメーション

〜ロゴやテキストに動きを加えて、自然な印象に仕上げよう〜

前回ご紹介したローダーに少し手を加えるだけで、特定の要素をふんわりと表示・非表示させるアニメーションを追加することができます。

企業ロゴやテキストを滑らかに表示・消去することで、ページが突然切り替わるような「残像感」をなくし、ローディングからサイト本編への移行をより自然に演出できます。

今回は、ローダー中央にあるテキストを「ふわっと表示・非表示」させる実装例をご紹介します。完成イメージは以下の通りです。

HTMLの記述

中央にテキストを配置する構造は前回と同様ですが、アニメーションを適用しやすくするために、ラップ要素を加えています。

html

<div class=”loader”>
<div class=”txt-content”>
<p class=”txt”>ふわっと出す</p>
</div>
</div>

CSSの記述

テキストはJavaScriptで制御するため、最初は非表示にしておきます。
また、ローダーの背景や中央配置の設定も行います。

css

.loader {
position: fixed;
width: 100%;
height: 100vh;
background-color: #fff;
z-index: 555;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.loader .txt {
font-size: 45px;
font-weight: bold;
color: rgb(30, 50, 93);
display: none; /* 最初は非表示 */
}

JavaScript（jQuery）の記述

今回は、3段階のタイミングでテキストとローダーの表示・非表示を制御します。
まずは、各処理を関数化しておきましょう。

js

$(function () {
// ローダーを非表示にする関数
function end_loader() {
$(‘.loader’).fadeOut(800);
}

// テキストを表示する関数
function show_txt() {
$(‘.loader .txt-content .txt’).fadeIn(400);
}

// テキストを非表示にする関数
function hide_txt() {
$(‘.loader .txt-content .txt’).fadeOut(400);
}

// タイマー処理の流れ
$(window).on(‘load’, function () {
// 1秒後にテキストをふわっと表示
setTimeout(function () {
show_txt();
}, 1000);

// 3.5秒後にテキストをふわっと非表示
setTimeout(function () {
hide_txt();
}, 3500);

// 4.5秒後にローダーをフェードアウト
setTimeout(function () {
end_loader();
}, 4500);
});
});

実行の流れ↓

このように、setTimeoutを活用してタイミングを制御することで、全体的に滑らかな印象のローディング演出が実現できます。

【応用編②】複数の要素を“ふわっと”表示させるローディングアニメーション

〜アニメーションで「読み込み中」の印象を演出し、その後テキストがふわっと現れます〜

「要素をふわっと表示させるローダー」の応用として、今回は複数の要素を順番に表示させるローダーをご紹介します。

たとえば、企業ロゴとアニメーション、またはGIFとテキストなど、複数のビジュアル要素を段階的に見せたいときに使える演出です。
今回の例では、ローディングアニメーション → テキストの順にふわっと表示させる構成となっています。

HTMLの構造

まずは、ローダー内にアニメーションとテキストの要素を設置します。

html

<div class=”loader” id=”loader03″>
<div class=”looping-rhombuses-spinner”>
<div class=”rhombus”></div>
<div class=”rhombus”></div>
<div class=”rhombus”></div>
</div>
<p class=”txt”>こんにちは！</p>
</div>

CSSのスタイル

アニメーションCSSは外部から引用してください。ここではローダー本体と非表示状態の指定を行います。

css

.loader {
position: fixed;
width: 100%;
height: 100vh;
background-color: #fff;
z-index: 555;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.loader .txt {
font-size: 45px;
font-weight: bold;
color: rgb(30, 50, 93);
display: none;
}

.loader .looping-rhombuses-spinner {
display: none;
}

JavaScript（jQuery）の記述

ここでは4つのタイミングで処理を行います。
それぞれを関数化し、setTimeout()で順に実行するだけなので、複雑なロジックは不要です。

js

$(function () {
// ローダー非表示
function end_loader() {
$(‘#loader03’).fadeOut(800);
}
// アニメーション表示
function show_load() {
$(‘#loader03 .looping-rhombuses-spinner’).fadeIn(400);
}
// アニメーション非表示
function hide_load() {
$(‘#loader03 .looping-rhombuses-spinner’).fadeOut(400);
}
// テキスト表示
function show_txt() {
$(‘#loader03 .txt’).fadeIn(400);
}

// タイマー処理
$(window).on(‘load’, function () {
setTimeout(show_load, 800);    // 処理①
setTimeout(hide_load, 3500);  // 処理②
setTimeout(show_txt, 4000);   // 処理③
setTimeout(end_loader, 5000); // 処理④
});
});

実行の流れ↓