【脱jQuery】ローディング画面（クルクル）をJavascriptのみで実装

投稿日 2020年6月1日
更新日 2021年2月19日
著者のせっち
カテゴリープログラミング
カテゴリー脱jQueryシリーズ

こんにちは！フリーランスディレクター兼エンジニアののせっち@nosecchi01です。

Webサイトでよく見る、クルクル回るローディング画面を設置する方法をご紹介します。

不完全な状態でWebサイトを見せないために、読み込み中はクルクル、読み込み終了でクルクルを取ってコンテンツを表示します。

元々jQueryで使っていたコード（スニペット）を元にjavascriptに書き直した形なので、下記のような方にもオススメです。

「jQueryはわかるけどJavascriptはイマイチ・・・」
「jQueryを使わずにバニラjsで書いてみたいけど、正直自分で書くのは面倒。」

今回はめちゃくちゃ簡単なのでサクッといきます！

目標物を確認

早速コードペンで見てみましょう！

jQueryと比較するとわかりやすいので、jQuery、Javascriptを両方記載します。

Javascript側では、id=”js-loader”を操作します。

jQuery

jQueryで書いたものが下記です。

既にローディングが終了している場合はページをリロードしてくださいm(_ _)m

See the Pen loading(jQuery) by Yuki Nose (@yukinouz1) on CodePen.

Javascript

Javascriptで書いたものが下記です。

既にローディングが終了している場合はページをリロードしてくださいm(_ _)m

See the Pen loading(javascript) by Yuki Nose (@yukinouz1) on CodePen.

jQuery・Javascriptともに、デモ用にsetTimeoutを使ってクルクル回る時間を長くしています。

コメントアウトしている部分が本来必要なコードです。

CSSを確認(クルクルの部分だけ）

クルクルの部分だけCSSを確認しておきましょう。

.loader {
  align-items: center;
  background: #fff;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  &::after {
    animation: loader 0.5s linear infinite;
    border: 1px solid orange;
    border-radius: 50%;
    border-right: 1px solid rgba(orange, 0.2);
    border-top: 1px solid rgba(orange, 0.2);
    content: "";
    height: 70px;
    width: 70px;
  }
}

@keyframes loader {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

CSSアニメーションを使ってクルクルさせています。

infiniteが入っているので、jsを使って取ってあげないと一生回り続けます・・・。

jQuery vs Javascriptで中身を解説していく

jQueryとJavascriptで比較しながら解説していきます。

// jQuery
$(window).on('load',function(){
  // ここに関数
});

// Javascript
const loader = document.getElementById('js-loader');
window.addEventListener('load', () => {
  // ここに関数
});

コンテンツの読み込みが完了したら関数を実行せよ、となります。

Javascriptの方では、id="js-loader"を取得し、const loaderに代入しています。

// jQuery
$("#js-loader").fadeOut();

// Javascript
 const ms = 400;
  loader.style.transition = 'opacity ' + ms + 'ms';
  
  const loaderOpacity = function(){
    loader.style.opacity = 0;
  }
  const loaderDisplay = function(){
    loader.style.display = 'none';
  }
  setTimeout(loaderOpacity, 1);
  setTimeout(loaderDisplay, ms); // opacityが0になるまで待ってからdisplay: none;にする

jQueryのfadeOut();をJavascriptでは一つずつ書いています。

・fadeOutはデフォルトでは400秒後に終了するので、const ms = 400; としています。
→任意の時間に変えていただいてOKです。

loader.style.display = "none"; で完全に消してあげないと、(opacity: 0にしただけでは)見えないだけで要素が残ってしまうので、z-index: 999が効いて、中のコンテンツが触れなくなります。

setTimeout(loaderDisplay, ms); としているのは、opacityがゼロ(0)になるまで待ってあげるためですね。

同時にかけてしまうと、transitionをかけた意味がなくなってしまうので…。

・loader.style.transition = 'opacity ' + ms + 'ms'; はCSSで下記のように書いてもOKです。

.loader {  
  align-items: center;
  background: #fff;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  transition: opacity 400ms ease;
}

解説は以上です。