はじめに

本記事では、SpinKitを使用したローディングの実装方法を記載します。
複数の画面で使用出来るように、コンポーネントのような形で作成しています。

ローディングのJavaScriptの準備

SpinKitの「<>Source」を押下して表示された「HTML」の内容を以下の「html」の変数に記載します。
※現在記載している内容は削除頂いて大丈夫です。

$(function () {
  // 以下に「SpinKit」で選んだアニメーションのHTMLを貼付する
  const html = `
  <div id="loader">
    <div class="sk-chase">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>
  </div>`;

  $(".loading").html(html);
});

ローディングのCSSの準備

SpinKitの「<>Source」を押下して表示された「CSS」の内容を以下の「/* 以下に「SpinKit」で選んだアニメーションのCSSを貼付する */」の下に記載します。
※現在記載している内容は削除頂いて大丈夫です。

tobiasahlin.com

@keyframes fadeOut {
  from {
      opacity: 1;
  }
  to {
      display: none;
      opacity: 0;
      z-index: -1;
  }
}

#loader {
  position: absolute;
  top: -16px;
  left: -16px;
  width: calc(100vw + 32px);
  height: calc(100vh + 32px);
  background-color: #8c80ff;
  /* 環境によって「z-index」追加 */
}

/* 読み込み完了後に「loaded」を付与する */
#loader.loaded {
  display: none;
}

/* 以下に「SpinKit」で選んだアニメーションのCSSを貼付する */

.sk-chase {
  width: 100px;
  height: 100px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
  margin: 0 auto;
  top: calc(100vh / 2 - 100px);
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}

ローディングを使用するHTMLの準備

用意したローディングのJavaScriptとCSSを読み込みます。
また、ローディングのJavaScriptで使用するjQueryをCDNから読み込みます。

ローディング表示用に「<div class="loading"></div>」を定義します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ローディングサンプル</title>
    <meta charset="UTF-8" />
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" href="./loading.css" />
    <script src="./loading.js"></script>
  </head>

  <body>
    <div class="loading"></div>
  </body>
</html>

ローディングの止め方

以下のjQueryを実行する事で、ローディングを停止する事ができます。

$('.loading').hide();

以下のjQueryを実行する事で、ローディングを再開する事ができます。

$('.loading').show();

ソースコードの全量

github.com

技術ブログ

プログラミング、IT関連の記事中心

HTMLとJavaScriptとCSSでローディングを作成する方法（SpinKit）