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アナリティクスタグは流用しないで下さい。