PROGRESS BAR.JSでプログレスバーが表示されるローディング画面を作成

分析結果などを表示するサイトで分析結果のページが表示する前に「分析中～。。。」などど別ページを表示させる方法です。

仕組み

メインのページの上にローディングのページを重ね、ローディングページのプログレスバーの作動が終わったらそのページを消すという仕組みです。

HTMLの最初にローディングページHTMLを記載しその後に通常のHTMLを記載します。

必要なもの

「jquery」とプログレスバーを表示させる「progressbar.min.js」、サンプルではCDNで読み込んでいます。

注意点

重なり順・・・ローディングページが最前面になるように「z-index」を指定。※サンプルは最前面。

画面が消える時間・・・プログレスバーが終わる時間とローディングページが消える時間を合わせないとプログレスバー作動途中でページが消えてしまいます。※サンプルでは「10000」

サンプル

サンプルを表示する

サンプルHTML ※Bootstrap5(単体で動きます)

<!doctype html>
<html lang="ja">
<head>
<title>ローディング画面を表示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- ローディング画面 CSS -->
<style>
#loading-screen {
position: fixed;
z-index: 2147483647;
width: 100%;
height: 100%;
background:#fff;
}
</style>
</head>

<body>
<!-- ローディング画面表示HTML --> 
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">

<div id="loading-screen">

<div class="row justify-content-center">
<div class="col-10 col-md-4">
<div id="container"></div>
</div>
</div>

</div>
<!-- /ローディング画面表示HTML --> 

<!-- ローディング画面表示後のHTML --> 
<div class="row justify-content-center">
<div class="col-11 col-md-5 mt-5">
<h3 align="center">ローディング画面表示後に表示したいコンテンツここから</h3>
</div>
</div>
<!-- /ローディング画面表示後のHTML --> 

<!-- Bootstrap5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ek" crossorigin="anonymous"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- ローディング画面表示script -->
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
<script>
var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 6,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 10000,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * 100);
    if (value === 0) {
      bar.setText('');
    } 
	if (value === 100) {
    bar.setText(value + '%');
    } 
	else {
    bar.setText(value + ' /100%');
    }
    bar.text.style.color = state.color;
  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0); 
</script>
<!-- ローディング画面を消すscript -->
<script>
setTimeout(function() {
    $('#loading-screen').fadeOut("slow");
}, 10000);
</script>
</body>
</html>

<!doctype html>

<head>

<title>ローディング画面を表示</title>

<style>

#loading-screen {

position: fixed;

z-index: 2147483647;

width: 100%;

height: 100%;

background:#fff;

}

</style>

</head>

<body>

</div>

<h3 align="center">ローディング画面表示後に表示したいコンテンツここから</h3>

</div>

var bar = new ProgressBar.SemiCircle(container, {

strokeWidth: 6,

color: '#FFEA82',

trailColor: '#eee',

trailWidth: 1,

easing: 'easeInOut',

duration: 10000,

svgStyle: null,

text: {

value: '',

alignToBottom: false

from: {color: '#FFEA82'},

to: {color: '#ED6A5A'},

step: (state, bar) => {

bar.path.setAttribute('stroke', state.color);

var value = Math.round(bar.value() * 100);

if (value === 0) {

bar.setText('');

}

if (value === 100) {

bar.setText(value + '%');

}

else {

bar.setText(value + ' /100%');

}

bar.text.style.color = state.color;

}

});

bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';

bar.text.style.fontSize = '2rem';

bar.animate(1.0);

</script>

setTimeout(function() {

$('#loading-screen').fadeOut("slow");

}, 10000);

</script>

</body>

</html>

参考サイト　動くWebデザインアイデア帳　ローディング