CSS によるローディングアニメーションのサンプルと簡単な実装方法

CSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプルと共に、jQuery や外部モジュールも利用せず、実際に利用するための簡易的な方法をご紹介します。

まずは、今回適当に作成したローディングアニメーションのデモをご覧ください。

See the Pen
Simple CSS Spinner valiation by digistate (@digistate)
on CodePen.

この HTML と CSS を基礎にして、以下に実際に利用するための手順をまとめます。

HTML の構造

各ローディングアニメーション要素の HTML の構造は至ってシンプルです。

<div class="box">
  <!-- type1 〜 type8 はお好みで -->
  <div class="spinner type1">
    <span>Loading...</span>
  </div>
</div>

CSS

アニメーションの元となる .spinner 要素の CSS は、以下を基本とします。

/* ローディングアニメーション */
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 120px;
  height: 120px;
}

/* Loading テキスト */
.spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 12px;
}

今回のデモでは、8種類のアニメーションパターンがありますが、例えば1番目のアニメーションであれば、上記のベースの CSS に加えて以下を追加します。

/* 1番目のアニメーションの場合 */
.spinner.type1 {
  border-radius: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: #fff rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12);
  /* ローディング要素のアニメーションを指定 */
  -webkit-animation: spinner1_1 1.5s infinite linear forwards;
          animation: spinner1_1 1.5s infinite linear forwards;
}
.spinner.type1 span {
  /* Loading テキストのアニメーションを指定 */
  animation: spinner_loading_text 1.5s infinite linear forwards reverse;
}

/* ローディング要素のアニメーション内容 */
@-webkit-keyframes spinner1_1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinner1_1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Loading テキストのアニメーション内容 */
@-webkit-keyframes spinner_loading_text {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spinner_loading_text {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

次に、このデモの構造を利用して実際にローディング表示として実装する簡単な方法をご紹介します。

実際にページの「読み込み中」要素として利用してみる

このローディングアニメーションを、Webページにアクセスした際に、最初に表示させてページ読み込み後に自動的に消えるようにする場合は、例えば以下のようにします。

HTML

実際に利用するローディングコンテンツの要素は1つのみなので、 type1 〜 type8 の中から適当に1つ選択し .spinner セレクタに繋げてセットします。
また、ラッパー要素の .box には、JavaScript で操作するために適当な ID をつけておきます(以下では #my-spinner )。

<div id="my-spinner" class="box">
  <!-- type1 〜 type8 はお好みで -->
  <div class="spinner type1">
    <span>Loading...</span>
  </div>
</div>

このHTMLを、<body> の直後か </body> の直前に挿入しておきます。

CSS

ローディングコンテンツ(.box)の表示は、フルスクリーンで表示させるため、上記デモのものではなく以下のようにしておきます。

.box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  -webkit-transition: all 1.2s ease; /* 1.2秒でフェードアウト */
          transition: all 1.2s ease;
  color: #fff; /* ローディングアニメーションカラー */
  background-color: #333; /* 背景カラー */
}

読み込み完了時には、JavaScript からフルスクリーン表示を消すための class を挿入します。
これについてのスタイルも用意します。

/* ローディング表示を消すための定義 */
.box.loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.spinner 等の他の要素の CSS はデモのものをそのまま利用できます。

JavaScript

JavaScript では、ページ内のすべてのリソース(DOMツリー、画像、その他外部リソース等)の読み込み完了時にローディング表示を消すようにします。

window.onload = function() {
  let spinner = document.getElementById('my-spinner');

  // .box に .loaded を追加してローディング表示を消す
  spinner.classList.add('loaded');
}

たったこれだけで、外部モジュールも必要とせず、自作でローディングアニメーション表示ができます。