ページ読み込み中のローディング画像をつくってみた

htmlで表示したいコンテンツの上にdivのブロックで読み込み中の
ソースを作成します。

 


<div id="loader_wrap">
	<div id="loader_conts">
		<img src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/Preloader.gif" alt="ただ今読み込み中です…" />
		<p>ただ今読み込み中です…</p>
	</div>
</div>
<div id="contents_wrap">
  <p>ロード後に表示させたい内容をここにかくよ</p>
  <img src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/sakura.jpg" alt="さくらの画像" />
</div>

 

 

cssでローディング画面の初期設定を非表示にしておきます。
 


#loader_wrap {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}

#loader_conts {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #333;
  z-index: 2;
}

#loader_conts img {
  display: block;
  width: 100%;
}

 

 

jQueryで以下にコメントアウトしているような内容を指示します。
 


$(function() {
  var h = $(window).height(); //ウィンドウの高さを指定
 
  $('#contents_wrap').css('display','none'); //表示したいコンテンツを非表示
  $('#loader_wrap ,#loader_conts').height(h).css('display','block'); //ローディング中の画面を表示
});

$(function(){
    setTimeout(function(){ //10秒立ったら以下のことを行う
      $('#loader_wrap').delay(1000).fadeOut(1000); //1秒でフェードアウト
  		$('#loader_conts').delay(600).fadeOut(300); //0.3秒でフェードアウト
  		$('#contents_wrap').fadeIn('slow').css('display', 'block'); //表示したいコンテンツを表示
    },10000);
});

 

 

これでページ読み込み中のローディング画像をセットできますよ~！
いまはいろんなプラグインがあるので、自分で作成することもすくないですけど…
ぜひオリジナルのローディング画像を作成してみてください！

Share: