【jQuery】ローディング画面を作る方法

ウェブページを訪れたとき、すぐにコンテンツが表示されない場合、ユーザーは待機中の間、何を感じるでしょうか？その答えは、ローディング画面のデザインと機能によって変わる可能性があります。この記事では、jQuery, Animate.css, SVGなどの技術を使用して、魅力的なローディング画面を簡単に追加する方法をご紹介します。

jQueryでの基本的なローディング画面の実装
アニメーションライブラリの使用
SVGローダーの使用
CSS Keyframesを利用する
まとめ

jQueryでの基本的なローディング画面の実装

HTMLの準備: ローディング画面の領域を定義します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ローディング画面のサンプル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="loading">
        <p>ローディング中...</p>
    </div>
    <div class="content">
        <!-- ここにコンテンツを追加 -->
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSSでのスタイリング: ローディング画面を中央に配置し、フェードイン/フェードアウトのエフェクトを追加します。

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    opacity: 0;
}

JavaScript: window.loadイベントを使用して、ページが完全に読み込まれたときにローディング画面を非表示にします。

$(window).on('load', function() {
    $('.loading').fadeOut(500, function() {
        $('.content').animate({opacity: 1}, 500);
    });
});

このサンプルでは、ページが読み込まれると、ローディング画面が表示されます。ページの全てのコンテンツが読み込まれた後、jQueryのloadイベントを使用してローディング画面をフェードアウトし、コンテンツをフェードインさせます。

この基本的なローディング画面をカスタマイズして、より高度なエフェクトやアニメーションを追加することも可能です。

アニメーションライブラリの使用

Animate.cssは、さまざまなアニメーションを簡単に追加できるライブラリです。bounce, fadeIn, rotateなどのクラスを要素に追加するだけで、即座にアニメーションが適用されます。

Animate.cssを追加

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

アニメーションを追加

$('.loading p').addClass('animate__animated animate__bounce');

SVGローダーの使用

SVGアニメーションは、軽量で高品質なアニメーションを作成するのに適しています。特に、円形のローダーや波形アニメーションなど、特定の形状や動きを持つアニメーションを実装する場合に便利です。

<div class="loading">
    <svg width="80" height="80" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#000">
        <g fill="none" fill-rule="evenodd" stroke-width="2">
            <circle cx="22" cy="22" r="1">
                <animate attributeName="r"
                begin="0s" dur="1.8s"
                values="1; 20"
                calcMode="spline"
                keyTimes="0; 1"
                keySplines="0.165, 0.84, 0.44, 1"
                repeatCount="indefinite" />
                <animate attributeName="stroke-opacity"
                begin="0s" dur="1.8s"
                values="1; 0"
                calcMode="spline"
                keyTimes="0; 1"
                keySplines="0.3, 0.61, 0.355, 1"
                repeatCount="indefinite" />
            </circle>
            <circle cx="22" cy="22" r="1">
                <animate attributeName="r"
                begin="-0.9s" dur="1.8s"
                values="1; 20"
                calcMode="spline"
                keyTimes="0; 1"
                keySplines="0.165, 0.84, 0.44, 1"
                repeatCount="indefinite" />
                <animate attributeName="stroke-opacity"
                begin="-0.9s" dur="1.8s"
                values="1; 0"
                calcMode="spline"
                keyTimes="0; 1"
                keySplines="0.3, 0.61, 0.355, 1"
                repeatCount="indefinite" />
            </circle>
        </g>
    </svg>
</div>

CSS Keyframesを利用する

CSSの@keyframesを使用すると、オリジナルのアニメーションを手軽に作成することができます。回転、拡大/縮小、フェードなど、様々なエフェクトを組み合わせることが可能です。

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading p {
    display: inline-block;
    animation: rotate 2s linear infinite;
}

ローディング中…