Webサイトのページが読み込まれる際、訪問者が何も起こっていないと感じるのは好ましくありません。ページローダーは、ページの読み込みが進行中であることをユーザーに示し、適切にデザインされている場合は、ウェブサイトのブランディングにさらに貢献することができます。以下に、当サイトでも使用しているCSSを用いたページローダーの一例を示します。

ローダーコード

HTMLとcss使用してローダーを作成します。

<div id="loader" class="loaded">
    <div class="orbit-spinner">
      <div class="orbit"></div>
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
    <div class="loader-text">...Loading</div>
</div>

デザインコード

CSSを使用して、ローダーのスタイルを設定します。アニメーションは、3つのオービットが異なる角度と速度で回転するように設計されています。

.orbit-spinner,
    .orbit-spinner * {
      box-sizing: border-box;
    }

    .orbit-spinner {
      height: 55px;
      width: 55px;
      border-radius: 50%;
      perspective: 800px;
      position: relative;
      top: 40%;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
    }

    .orbit-spinner .orbit {
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .orbit-spinner .orbit:nth-child(1) {
      left: 0%;
      top: 0%;
      animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
      border-bottom: 3px solid #f9ebeb;
    }

    .orbit-spinner .orbit:nth-child(2) {
      right: 0%;
      top: 0%;
      animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
      border-right: 3px solid #f9ebeb;
    }

    .orbit-spinner .orbit:nth-child(3) {
      right: 0%;
      bottom: 0%;
      animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
      border-top: 3px solid #f9ebeb;
    }

    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 9999;
      background-color: #333;
      transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    }

    #loader.loaded {
      opacity: 0;
      visibility: hidden;
    }

    .loader-text {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translate3d(0, -50%, 0);
      color: #fff;
      font-size: 24px;
      text-align: center;
    }

    @keyframes orbit-spinner-orbit-one-animation {
      0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
      }

      100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
      }
    }

    @keyframes orbit-spinner-orbit-two-animation {
      0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
      }

      100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
      }
    }

    @keyframes orbit-spinner-orbit-three-animation {
      0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
      }

      100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
      }
    }

作動の仕組み

ローダーはそれぞれのオービットは独自のアニメーションを持っており、一定のスピードで継続的に回転します。

まとめ

このようなローダーは、訪問者がウェブサイトの読み込みを待つ間に視覚的なフィードバックを提供します。その結果、訪問者はウェブサイトが動作していることを認識し、ページの読み込みを待つ可能性が高くなります。さらに、この種のデザイン要素はブランディングに貢献し、全体的なユーザーエクスペリエンスを向上させることができます。