Last-Modified: 2022/07/24

jQueryでローディング画面を実装する方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでローディング画面を実装する方法について、簡単に解説していきます。

HTML

jQueryでローディング画面を実装します。

まずは、HTMLのサンプルを以下に示します。

<div id="loading_div">
  <div id="loading_inner_div">
      <img src="loading.gif" width="40" height="40"/>
      <p>NOW LOADING</p>
  </div>
</div>

上記のコードでは、画面全体を覆うdiv要素とローディング画像等を表示するdiv要素を配置しています。

CSS

CSSのサンプルを以下に示します。

#loading_div {
  z-index: 1;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
}
#loading_inner_div {
  z-index: 2;
  position: fixed;
  top: 50%;
  left: 50%;
  width:120px;
  height:120px;
  margin-top: -60px;
  margin-left: -60px;
  display: none;
  text-align: center;
  font-size:12px;
  color: #fff;
}

idがloading_divの要素には画面を覆うための設定をしています。

loading_inner_divのidの要素には上下左右中央寄せの設定をしています。

jQuery

jQueryのサンプルを以下に示します。

$('#loading_div').css('display','flex');
$('#loading_inner_div').show();

$(window).on('load', function(){
  $('#loading_div').delay(1000).fadeOut(800);
  $('#loading_inner_div').delay(500).fadeOut(250);
});

スクリプト読み込み後、すぐにローディング画面を表示するようにしています。

その後、コンテンツが全て読み込まれた後のloadイベントで、ローディング画面をフェードアウトさせています。

• facebook
• Tweet
• Read Later