【React】超シンプルなローディングイメージの作り方

マッシュルーム
2025-11-20
2025-11-20

こんにちは！
フューチャースピリッツ開発チームにおけるフロントエンドの番長こと、マッシュルームです！！

今回は僕がReactプロジェクトでよく使用している自作ローディングイメージを公開します！

全ソースを公開するのでそのままコピーするだけで実装できます！
是非真似してみてください！！

（超クールな今風フラットカレンダーはコチラ）

完成イメージ

まるで水面に小石を投げいれた衝撃で広がる波紋のように、
シンプルながら美しいサークルを描きます。

loading

ディレクトリ構成

次の２ファイルを作成します。

  • Loading / Loading.tsx
  • Loading / Loading.css

 

Loading.tsx

import React from "react";
import './Loading.css';

/**
 * ローディングイメージ 表示
 */
export function loadingStart() {
    const loading = document.getElementById('LOADING');
    if (!loading) return;
    loading.style.display = 'initial';
    loading.style.opacity = '1';
}

/**
 * ローディングイメージ 非表示
 */
export function loadingEnd() {
    const loading = document.getElementById('LOADING');
    if (!loading) return;
    loading.style.opacity = '0';
    loading.style.display = 'none';
}

const Loading: React.FC = () => {

    return (
        <div className="LOADING" id="LOADING">
            <div className="LOADING-ANIMATION">
                <div className="LOADING-ANIMATION-CIRCLE"></div>
            </div>
        </div>
    );
};

export default Loading;

Loading.css

/* ローディング画面の背景 */
.LOADING {
     position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10100;
    transition: opacity 1s ease;
    animation: change-color-loading-after .3s ease both .3s;
    opacity: 0;
    display: none;
}
@keyframes change-color-loading-after {
    0%{
         background:rgba(128, 128, 128, 0.4);
    }
    100%{
         background:rgba(128, 128, 128, 0.4);
    }
}

/*ローディング部分のアニメーション*/
div.LOADING > div.LOADING-ANIMATION {
     position: absolute;
     top: 0;
    right: 0;
     bottom: 0;
     left: 0;
     margin: auto !important;
     width: 100px;
     height: 100px;
}
div.LOADING-ANIMATION > div.LOADING-ANIMATION-CIRCLE {
     width: 100%;
     height: 100%;
     margin: auto;
     border: 4px solid #8a8383;
     border-radius: 100%;
     animation-fill-mode: both;
     animation: loading-circle-animation 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
@keyframes loading-circle-animation {
    0% {
         transform: scale(0.1);
         opacity: 1;
    }
    70% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
         opacity: 0.0;
    }
}

実装方法

使用したいコンポーネントにて、次のコンポーネント／メソッドをインポートします。

  • Loadingコンポーネント
  • loadingStartメソッド
  • loadingEndメソッド
 import Loading, { loadingStart, loadingEnd } from './Loading/Loading';

jsx（tsx）内にて、次のように書くと実装されます。

<div>
    <Loading />
</div>

使い方

loadingStart()

ローディングイメージを表示するメソッドです。
fetchでのAPI通信など、時間を要する処理の直前で実行すると効果抜群です。

loadingEnd()

ローディングイメージを非表示にするメソッドです。
出したら必ず閉まいましょう。

try-catch の finallyブロック内で実行するのがマイブーム

おわりに

以上、超シンプルな自作ローディングイメージの実装方法でした！

シンプルながらもどこか美しいローディングイメージを是非導入してみてください！！ ^^
© Future Spirits Co.Ltd.