プログレスバー

Web

2023年11月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はページ読み込み時に「プログレスバー」を表示させてみたいと思います。

progressとは「進捗」という意味ですね。

・progressbar.js

・ページ読み込み時に全画面表示

・まとめ

progressbar.js

参考：kasumiblog｜ローディング画面にパーセントとプログレスバーを表示する方法【progressbar.js】

まずはprogressbar.jsをCDNで読み込みます。

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>

プログレスバーを設置します。IDをcontainerとしておきます。

<div id="container"></div>

デモサイトを参考にしてスクリプトを記述します。

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#f00',
  trailColor: '#555',
  trailWidth: 4,
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {color: '#f00'},
  to: {color: '#00cc99'},
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
    bar.path.setAttribute('stroke', state.color);
  }
});

bar.animate(1.0);

進捗状況をパーセントで表示し、バーの色が赤→緑に変わるようにしてみました。

ページ読み込み時に全画面表示

参考：動くWebデザインアイディア帳｜ローディング-プログレスバー＋数字カウントアップ

まずは<body>の直下に以下のように二重の<div>を設置します。

IDをそれぞれsplash、splash_textとしておきます。

<div id="splash">
  <div id="splash_text"></div>
</div>

CSSを記述します。

#splash {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: #333;
  text-align: center;
  color:#fff;
}

#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99999;
  width: 90%;
  transform: translate(-50%, -50%);
  color: #fff;
}

スクリプトを記述します。

var bar = new ProgressBar.Line(splash_text, {
  easing: 'easeInOut',
  duration: 1400,
  strokeWidth: 0.5,
  color: '#f00',
  trailWidth: 0.5,
  trailColor: '#fff',
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      position: 'absolute',
      left: '50%',
      top: '50%',
      padding: '0',
      margin: '-30px 0 0 0',
      transform:'translate(-50%,-50%)',
      'font-size':'1.5rem',
      color: '#fff',
    },
    autoStyleContainer: false
  },
  from: {color: '#f00'},
  to: {color: '#00cc99'},
  step: function(state, bar) {
    bar.setText(Math.round(bar.value() * 100) + ' %');
    bar.path.setAttribute('stroke', state.color);
  }
});

bar.animate(1.0, function () {
  $("#splash").delay(500).fadeOut(800);
});

最後の部分がよくわかりませんが、バーのアニメーションが終わったらゆっくり消えてページが表示されるようにしてあるようです。すごいなあ。

まとめ

スイカバーが食べたくなってきました。

バー（Line）の他に円形（Circle）でもやってみたいですね。

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog

プログレスバー

progressbar.js

ページ読み込み時に全画面表示

まとめ

Contact Us