こもるーとたぬきの備忘録

profile

スピナーを実装した話

JavaScriptNext.jsReact開発
無料のDBを使用しているためか、データを取得する時などに処理に時間がかかってしまう。
処理中に画面に何も変化がないと「あれ？エラーでも起きてる？」と感じてしまうため、スピナーを実装した。
画面全体を覆うように作成したので、割といろんな場面で使用できると思い、備忘録としてメモ
開発環境バージョン
Next.js15.2.1
TypeScript5.0.0
sass1.85.1

スピナーコンポーネント

Spinner/index.tsx


    import { NextPage } from "next";

    import styles from "./style.module.scss";

    // スピナー
    // 画面いっぱいにコンポーネントが展開され、中央にスピナーが表示される
    export const LoadingSpinner: NextPage = () => {
      return (
        <div className={styles.overlay}>
          <div className={styles.spinner}></div>
        </div>
      );
    };

Spiner/style.module.scss


    .overlay {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;

      opacity: 0.5;
      background: black;
    }

    .spinner {
      position: absolute;
      z-index: 999;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: 60px;
      height: 60px;

      &::after {
        content: "";

        display: block;

        width: 100%;
        height: 100%;
        border-top: 6px solid rgb(0 174 239 / 80%);
        border-right: 6px solid rgb(0 174 239 / 15%);
        border-bottom: 6px solid rgb(0 174 239 / 15%);
        border-left: 6px solid rgb(0 174 239 / 15%);
        border-radius: 100%;

        animation: rotation 0.6s infinite linear;
      }
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(359deg);
      }
    }

呼び出し方

useStateでスピナーの表示・非表示の判定を管理する。
以下のように、jsxに記述してtrueの時のみ表示させる。 


    {/* ローディングスピナー */}
    {<loading && LoadingSpinner />}