Web活のロゴ

Web制作Output&初心者のための徹底ガイド

お問い合わせ

注目のタグ

#VsCode#Scss#Gsap#Pug#Swiper#ChatGTP
    TOP>Javascript>【one div loaders】
    便利なローディングアニメーション

【one div loaders】
便利なローディングアニメーション

2024.06.11
はじめに
概要

OneDivLoadersのサイトは、1つのdiv要素だけで作られたモノクロのローディングスピナーのコレクションを提供しています。これらのローダーは、サイズ、色、アニメーションのプロパティをCSS変数でカスタマイズできます。24pxグリッドで設計されており、スケーラブルでアクセシブルです。個人および商業プロジェクトでの使用が無料で、クレジット不要です。本ページのようなローディングアニメーションが可能です。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
スポンサーリンク

実装内容

動画

公式サイト

https://onedivloaders.vercel.app

短い記述で様々なローディングアニメーションが実装できます。種類も豊富でHTMLとCSSのみで構成されています。

コード

全体のコード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- one-div-loadersのコード -->
  <style>
    .circle-spin-1 {
      --size: 24px;
      --stroke-width: calc(var(--size) / 6);
      --color: currentColor;
      --animation-timing-function: linear;
      --animation-duration: 1s;
      width: var(--size);
      height: var(--size);
      border-width: var(--stroke-width);
      border-style: solid;
      border-color: var(--color) var(--color) var(--color) transparent;
      border-radius: 50%;
      transform: rotate(0deg);
      animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-1-animation;
    }

    @keyframes circle-spin-1-animation {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }
  </style>
  <!-- デザインのCSS 要素を中央寄せにしています。-->
  <style>
    .loading,
    #main-container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #global-container {
      transition: 1s;
      opacity: 0;
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div class="loading">
      <!-- one-div-loadersのコード -->
    <div class="circle-spin-1"></div>
  </div><!-- /.loading -->
  <div id="global-container">
    <div id="container">
      <header class="header"></header>
      <main>
        <div id="main-container">
          <h2>成功</h2>
        </div><!-- /#main-container -->
      </main>
      <div class="footer"></div><!-- /.footer -->
    </div><!-- /#container -->
  </div><!-- /#global-container -->
  <script>
    window.addEventListener('load', function () {
      setTimeout(function () {
        document.querySelector('.loading').style.opacity = '0';
        setTimeout(function () {
          document.querySelector('.loading').style.position = 'absolute';
          document.body.style.overflow = 'auto';
          document.querySelector('#global-container').style.opacity = '1';
          document.querySelector('#global-container').style.visibility = 'visible';
        }, 1000); // .loadingのフェードアウトに1秒かかるため、少し待ちます
      }, 2000);
    });
  </script>
</body>

</html>

HTML

<div class="circle-spin-1"></div>

CSS

.circle-spin-1 {
      --size: 24px;
      --stroke-width: calc(var(--size) / 6);
      --color: currentColor;
      --animation-timing-function: linear;
      --animation-duration: 1s;
      width: var(--size);
      height: var(--size);
      border-width: var(--stroke-width);
      border-style: solid;
      border-color: var(--color) var(--color) var(--color) transparent;
      border-radius: 50%;
      transform: rotate(0deg);
      animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-1-animation;
    }

    @keyframes circle-spin-1-animation {
      from {
        transform: rotate(0deg);
      }

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

変数定義

  • --size: スピナーのサイズを指定します。ここでは24pxです。
  • --stroke-width: スピナーのボーダーの幅を指定します。サイズの6分の1に設定されています。
  • --color: スピナーの色を指定します。currentColorは、要素の現在のテキスト色に従います。
  • --animation-timing-function: アニメーションのタイミング関数を指定します。linearはアニメーションが一定の速度で進行することを意味します。
  • --animation-duration: アニメーションの持続時間を指定します。ここでは1s(1秒) です。

スピナーのスタイル

  • widthとheight: スピナーの幅と高さを--sizeの値に設定します。
  • border-width: ボーダーの幅を--stroke-widthに設定します。
  • border-style: ボーダーのスタイルをsolid(実線) に設定します。
  • border-color: ボーダーの色を指定します。三辺は--colorで指定された色、最後の辺は透明 (transparent) です。
  • border-radius: ボーダーの角を丸くするために50%に設定します。
  • transform: 初期の回転角度を0degに設定します。
  • animation: アニメーションプロパティを設定します。タイミング関数、持続時間、無限ループ、そしてアニメーションの名前（circle-spin-1-animation）を指定します。

アニメーションの定義

  • from: アニメーションの開始時の状態を定義します。ここではtransform: rotate(0deg)で、回転角度が0度です。
  • to: アニメーションの終了時の状態を定義します。ここではtransform: rotate(360deg)で、回転角度が360度（1回転）です。

Javascript

 window.addEventListener('load', function () {
      setTimeout(function () {
        document.querySelector('.loading').style.opacity = '0';
        setTimeout(function () {
          document.querySelector('.loading').style.position = 'absolute';
          document.body.style.overflow = 'auto';
          document.querySelector('#global-container').style.opacity = '1';
          document.querySelector('#global-container').style.visibility = 'visible';
        }, 1000); // .loadingのフェードアウトに1秒かかるため、少し待ちます
      }, 2000);
    });

詳細解説

  1. window.addEventListener('load', function () { ... });:
    • ページが完全に読み込まれたときに、この無名関数が実行されます。
  2. setTimeout(function () { ... }, 2000);:
    • ページがロードされてから2秒後にこの無名関数が実行されます。
  3. document.querySelector('.loading').style.opacity = '0';:
    • .loadingクラスを持つ要素の不透明度を0に設定し、フェードアウトさせます。
  4. setTimeout(function () { ... }, 1000);:
    • フェードアウトが完了するのを待つために、さらに1秒後にこの無名関数が実行されます。
  5. document.querySelector('.loading').style.position = 'absolute';:
    • .loading要素の位置を絶対位置に設定し、レイアウトから外します。
  6. document.body.style.overflow = 'auto';:
    • body要素のオーバーフローをautoに設定し、ページ全体のスクロールを有効にします。
  7. document.querySelector('#global-container').style.opacity = '1';:
    • #global-container要素の不透明度を1に設定し、表示します。
  8. document.querySelector('#global-container').style.visibility = 'visible';:
    • #global-container要素の可視性をvisibleに設定し、表示します。

ポイント解説

まず、bodyの中にローディングセクションとコンテンツセクション（ここでは#global-containerとしています）を作成します。

  1. ローディングセクション:
    • height: 100vh;を設定し、画面全体の高さを占めるようにします。
    • このセクションは、ページの読み込みが完了するまで表示されます。
  2. コンテンツセクション:
    • あらかじめCSSで見えなくしておきます。ただし、display: none;ではなく、opacity: 0;やvisibility: hidden;を使います。display: none;だと、トランジションが適用されず、アニメーションされないためです。
  3. スクロールの無効化:
    • ローディング画面が表示されている間は、bodyにoverflow: hidden;を設定してスクロールを無効にします。

これらの設定をもとに、JavaScriptを使用してローディングアニメーションを実装します。ページが完全に読み込まれた後、ローディング画面をフェードアウトし、コンテンツセクションを表示させ、スクロールを有効にします。

まとめ

  • 短い記述様々なローディングアニメーションが実装できる
  • HTMLとCSSで構成されている
  • 種類が豊富に存在している
  • HTMLタグは一行で構成されている
  • Javascriptと組み合わせることにより、簡単に実装が可能になる
Copyright
© 2023 Souichi_Kimura All Rights Reserved.