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

こんにちは!フリーランスディレクター兼エンジニアののせっち@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;
}

解説は以上です。

Javascriptのおすすめ勉強法

学習サイトとしてはドットインストールがオススメです。

僕は基本Progate派なのですが、Javascriptに関してはドットインスールが最適です。

  • とにかく講座数が多い(課金は必須)
  • 実際にアプリを作りながら学べるので実践に近い
  • よく使う技術は何度も出てくるため、自然と覚えられる

Javascriptのオススメ書籍

Javascriptでオススメの書籍はこちらです。

正直内容はツマラナイのですが・・・。

タイトル通り「コードレシピ集」となっており、辞書的に使うのに最適です!

上記のドットインストールと合わせて使うことで、内容を補完し合えるのでオススメです。

jQueryのオススメ書籍

jQueryのオススメ書籍は『jQuery標準デザイン講座』です

jQueryの基礎の基礎から、アコーディオン、スムーススクロール、スライダー、パララックスなどWebサイト制作でそのまま使えるサンプルを通して学ぶことができます。

少しですが、Javascriptの基礎にも触れているので、初学者にとっての最初の一冊にオススメです!

もう一冊、Amazonのみですが、『コーディングが5倍速くなる!jQueryセレクター超入門』もかなりオススメです。

クリックでAmazonのページが開きます。

『セレクタに関する事のみ』に集中して書かれている硬派な本でして、他の部分は極力シンプルな構成になっています。

ですので、プログラミング系であるあるな「いきなりよくわからん内容が出てきて詰んだ・・・」ということがありません。

Kindle Unlimitedで無料で読めます!

まとめ

・fadeOut()がどういう仕組みで動いているのか、Javascriptで分解して書くことで理解できました。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
- WordPressが得意!
- 初心者向けGulp教材は購入者100部以上!