ローディング画面

概要

ページを開いたらローディングが表示され、指定の秒数が経ったらページ（要素）が見えるようにする。

使用するアニメーション（プラグイン）

Loaders.css

実装方法

CSSを読み込む

GitHubからloaders.min.cssをダウンロードし、cssファイルを読み込む。
https://github.com/ConnorAtherton/loaders.css

使用するアニメーションを選ぶ

デモページから使用したいアニメーションのコードを確認し、classと<div>をコピペする。
https://connoratherton.com/loaders

HTML

<div class="loader">
  <div class="loader__anime">
    <!-- ここからローディングアニメーション（プラグイン） -->
    <div class="loader-inner ball-spin-fade-loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
   <!-- // ここまでローディングアニメーション（プラグイン） -->
  </div>
  <div class="loader__text__wrap">
    <p class="loader__text">現在アクセスが集中しております</p>
  </div>
</div>

CSS

// ローディングの色変更
.ball-spin-fade-loader > div {
  background-color: #32ccc8;
}

// 以下、好きなように
.loader {
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  padding: 30vh 0 0;
  background-color: #fff;
  opacity: 1;
  transition: all 0.3s;
}

.loader.none {
  z-index: -9999;
  opacity: 0;
}

.loader__anime {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.loader__text__wrap {
  margin-top: 20px;
  text-align: center;
}

.loader__text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

JavaScript

// ページが読み込まれたら実行
$(function () {

  // 3秒だったらローディング画面をフェードアウトさせる
  window.setTimeout(function () {
    $(".loader").addClass("none");
  }, 3000);
});