Bootstrap の Spinner を利用してロード中画面を表示する

Bootstrap の Spinner を利用してロード中画面を表示する

2020年10月17日 CSS / Bootstrap / JS

大きな画像を利用したページや、大量のコンテンツが掲載されたページなどにおいて、画像やリソースが読み込まれるまで画面を表示させたくない場合、ロード画面を表示したい事があります。

世の中には JQuery で同様の事を実現できるプラグインなどがありますが、Bootstrap を利用してるのであれば、Bootstrap の Spinner を利用して簡単に実装することができますので、ここでサンプルコードをご紹介したいと思います。

もちろん、ページには Bootstrap に必要なライブラリを読み込むようにしてください。

HTML

<body>
<div id="loading">
  <div id="spinner" class="d-flex justify-content-center align-items-center">

    <div class="spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>

  </div>
</div>
<div id="wrap">
  <section class="container">
	<div class="contents">

	  <h2 class="text-center my-4">ロード後に表示させたい内容</h2>
	  <p class="text-center"><img src="https://picsum.photos/1280/720/?blur=3" class="img-fluid"></p>

	</div>
  </section>
</div>
</body>

CSS

<style>
#loading {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}
#spinner {
  display: none;
  color: #fff;
  z-index: 2;
}

#wrap{
  background: #fff;
  width: 100%;
}

</style>

JavaScript

<script>
$(function() {
  var h = $(window).height();

  $('#wrap').css('display','none');
  $('#loading ,#spinner').height(h).css('display','block');
});

$(window).on('load',function () {
  $('#wrap').css('display', 'block');
  $('#loading').delay(500).fadeOut(500);
  $('#spinner').delay(300).fadeOut(300);
});

//5秒たったら強制的にロード画面を非表示
$(function(){
  setTimeout('stopload()',5000);
});

function stopload(){
  $('#wrap').css('display','block');
  $('#loading').delay(500).fadeOut(500);
  $('#spinner').delay(300).fadeOut(300);
}

</script>

実際のサンプルはこちらでご確認いただけます。

ロード中 Spinner 画面サンプル