progressbar.jsを使ってページ表示前にローディング(プログレスバーと数値%カウントアップ)を表示する方法をご紹介します。
Contents
ディスプレイ広告
ローディング(プログレスバーと数値%カウントアップ)表示するCSS記述
※ページ初期表示時のページ全体(.wrap)とローディング(#container)のCSS記述です。必要に応じて変更して下さい。
body { font-size: 16px; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; position: relative; } p{ text-align: center; position: relative; } .wrap{ position: fixed; z-index: 999; width: 100%; height: 100%; background: #000000; text-align:center; color: #ffffff; top: 0; } #container { margin: 0 auto; width: 50%; height: 12px; position: absolute; left: 25%; top: 45%; } </style>
progressbar.jsでローディング(プログレスバーと数値%カウントアップ)表示するHTML記述
※ページ初期表示時のページ全体(class=”wrap”)とローディング(id=”container”)を用意します。必要に応じて変更して下さい。
<h1>progressbar.jsでローディング(数値%カウントアップ)を表示</h1> <p>ページを更新(F5)すると再度ローディングが表示されます。</p> <div class="wrap"> <div id="container"></div> </div>
progressbar.jsでローディング(プログレスバーと数値%カウントアップ)表示するJavaScriptの記述
※jquery-3.4.1.min.js、progressbar.min.jsファイルを読み込みます。new ProgressBar.Line(container, {オプション})を記述します。オプションにはローディングのイージング、速度、カラー、幅等を設定します。
<script src="jquery-3.4.1.min.js"></script> <script src="progressbar.min.js"></script> <script> var bar = new ProgressBar.Line(container, { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#fff', trailColor: '#ccc', trailWidth: 1, svgStyle: {width: '100%', height: '100%'}, text: { style: { // テキストカラー等 color: '#fff', position: 'absolute', right: '50%', top: '40px', padding: 0, margin: 0, transform: null }, autoStyleContainer: false }, from: {color: '#FFEA82'}, to: {color: '#ED6A5A'}, step: (state, bar) => { bar.setText(Math.round(bar.value() * 100) + ' %'); } }); bar.animate(1.0, function () { $(".wrap").delay(500).fadeOut(800); //アニメーション終了後ローディングを非表示 }); </script>
progressbar.jsでローディング(数値%カウントアップ)を表示するデモページ
progressbar.jsでローディング(数値%カウントアップ)を表示するデモページ
ソース元:ProgressBar.js – Progress bars with JavaScript
ProgressBar.js – Progress bars with JavaScript
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。