JavaScriptでローディングを実装する簡単な方法【脱jQuery 】

Webサイトにアクセスしたとき、ローディング画面が表示されることってあるよね。
あれはどうやっているのかな？

こんにちは、かがみ（@cony_tas）です！

今回はこのようなお悩みにお答えします。

Webサイトのローディングは、HTMLとCSSでローディング画面を作り、ロードが完了したらJavaScriptでローディング画面を非表示にすることで実装できます。

本記事を読んでコードを参考にしていただければ簡単にローディング画面を実装できるので、早速やってみましょう！

記事でわかること

・ローディング画面の実装方法

記事の信頼性

筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

CONTENTS［ hide ］

01｜ JavaScriptでローディングを実装する簡単な方法
・サンプルコード
・動作デモ
02｜最後に：JavaScriptでローディングを実装する簡単な方法

JavaScriptでローディングを実装する簡単な方法

最初にローディング画面を実装するメリットを説明します。

Webサイトにアクセスした時、ページの要素や画像が重くてすぐに読み込まれないときってありますよね。
この時、ローディングが無いと要素や画像が読み込まれていくところが丸見えですが、ローディング画面を上に重ねておくとすべて読み込み完了するまで画面を隠しておけるんです。

なので、以下のようなページはローディングを入れておくといいと思います。

・要素や画像が多いWebサイト
・ローディングを世界観演出として使いたいWebサイト

ゲームの公式サイトなんかはローディングアニメーションで世界観を演出することも多いですね。
逆に軽いサイトはローディングを入れると訪問者にストレスを与えてしまう可能性があるので、いらないと思います。

サンプルコード

では、実装に必要なサンプルコードをご紹介します。

HTML

<div class="loading">
  <span class="circle"></span>
</div>

loadingのクラスを付与した<div>を横幅・縦幅共に100%にし、z-indexで画面の最上位レイヤーに配置しておきます。

circleのクラスを付与した<span>はくるくる回るスピンアニメーションです。ここは無料ローディングアニメーションを入手できるサイトなどであなた好みのアニメーションを入れても大丈夫です。

CSS

.loading {
  position: fixed;
  z-index: 1000; ← z-indexはサイト内で一番大きくする
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #333333;
}

.loading.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}

.loading .circle {
  display: block;
  position: relative;
  top: calc( 50% - 20px );
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 7px solid #444444;
  border-top: 7px solid #5ae1e5;
  border-radius: 50px;
  animation: loading 700ms linear 0ms infinite normal both;
}

@keyframes loading {
  0% { transform: rotate( 0deg ); }
  100% { transform: rotate( 360deg ); }
}

後述するJavaScriptコードで、ロードが完了した時にloadingの<div>にhideクラスを付与し、opacityを0にすることでローディング画面を透明にします。

ただこのままだと透明なローディング画面がページの最上位レイヤーに残ったままで、サイト内のボタンが押せなかったりといろいろ不都合が生じるので、pointer-events: none;のプロパティも追加してクリックイベントを無効化しています。

display: none;で要素の表示を完全に切ってしまってもいいんですが、透明にする時transitionでフェードアウトしたくても効かなくなってしまうので今回はやりません。

JavaScript

const loading = document.querySelector( '.loading' );

window.addEventListener( 'load', () => {
  loading.classList.add( 'hide' );
}, false );

JavaScriptでやっていることはシンプルで、loadイベントでページの読み込みが完了したら、ローディング要素にhideクラスを付与しているだけです。

動作デモ

今回はCodePenでデモを作成してみましたが、サイトにアクセスすると最初に下のResultのようにスピンアニメーションが表示されます。

そして「JSタブ」を見ていただきたいのですが、「loading.classList.add( ‘hide’ );」の箇所でページのロードが完了したらhideクラスを付与しています。

ただhideクラスを付与してしまうと表示がフェードアウトしてしまうので、デモではコメントアウトにしています。笑

See the Pen ローディング by かがみ＠Web/UIデザイナー (@cony-tas) on CodePen.

最後に：JavaScriptでローディングを実装する簡単な方法

今回はJavaScriptでローディングを実装する方法をご紹介しました。

昔はローディング画面に憧れたものですが、やり方を知ると意外と簡単ですよね。笑
もちろん凝ったアニメーションにしようとなるとそれなりにJSのコードも複雑になりますが。

他にもJavaScriptで以下のようなものを紹介しているので、よかったらご覧ください！

>> スライドショーの作り方
 >> アコーディオンメニューの作り方
 >> スムーススクロールの実装方法
 >> スクロール時のイベント実装方法

いつも遊びにきていただいて、ありがとうございますっ

>> プログラミング記事一覧へ

ブログトップへ