プログレスバー

プログレスバーを表示する

プログレスバーとは、長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するもので、 グラフィカルユーザインタフェース の要素の一つである。

しばしば、ダウンロードやファイル転送のようにパーセント形式で表示される際に使われる。

プログレスメーターとも呼ばれる。 … ウィキペディアより


<body>
	<div id="progressBar">
		<div id="progressText"></div>
	</div>

	<div id="wrapper">
		<header> ～ ここにヘッダの内容 ～ </header>
		<main> ～ ここにページの内容 ～ </main>
		<footer> ～ ここにフッタの内容 ～ </footer>
	</div><!-- #wrapper -->
</body>


#progressBar {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.95); /* プログレスバーの背景色 */
	}
#progressText {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 999;
	width: 100%;
	transform: translate(-50%, -50%);
	}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
<script>
var bar = new ProgressBar.Line(progressText, {
	easing: 'easeInOut',
	duration: 1400,
	strokeWidth: .3,//読込後のゲージの太さ
	color: '#f00',//読込後のゲージの色
	trailWidth: .3,//読込前のゲージの太さ
	trailColor: '#eee',//読込前のゲージの色
	text: {
		style: {
			position: 'absolute',
			left: '50%',
			top: '50%',
			padding: '0',
			margin: '-30px 0 0 0',
			transform:'translate(-50%,-50%)',
			'font-size':'1.9rem',
			color: '#fff',
		},
		autoStyleContainer: false
	},
	step: function(state, bar) {
		bar.setText(Math.round(bar.value() * 100) + ' %');
	}
});
//アニメーション
bar.animate(1.0, function () {
	$("#progressBar").delay(500).fadeOut(800);
});
</script>

TOP