ローディング画面（プログレスバー＋数字カウントアップ）

html

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

<div id="container">
	<p>ローディング後、この画面が見えます。</p>
</div>

css

/* Loading背景画面設定　*/
#splash {
	/* fixedで全面に固定 */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: #333;
	text-align: center;
	color :#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #fff;
}

/* IE11対策用バーの線の高さ※対応しなければ削除してください */
#splash_text svg {
	height: 2px;
}


/*========= レイアウトのためのCSS ===============*/

#container {
	width: 100%;
	height: 100vh;
	background: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

a {
	color: #333;
}

a:hover {
	text-decoration: none;
}

//テキストのカウントアップ+バーの設定
var bar = new ProgressBar.Line(splash_text, { //id名を指定
	easing: 'easeInOut', //アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
	duration: 1000, //時間指定(1000＝1秒)
	strokeWidth: 0.2, //進捗ゲージの太さ
	color: '#555', //進捗ゲージのカラー
	trailWidth: 0.2, //ゲージベースの線の太さ
	trailColor: '#bbb', //ゲージベースの線のカラー
		text: { //テキストの形状を直接指定
			style: {//天地中央に配置
				position: 'absolute',
				left: '50%',
				top: '50%',
				padding: '0',
				margin: '-30px 0 0 0', //バーより上に配置
				transform: 'translate(-50%,-50%)',
				'font-size': '1rem',
				color: '#fff',
			},
			autoStyleContainer: false //自動付与のスタイルを切る
		},
	step: function(state, bar) {
		bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値
	}
});

//アニメーションスタート
bar.animate(1.0, function () { //バーを描画する割合を指定します 1.0 なら100%まで描画します
	$("#splash").delay(500).fadeOut(800); //アニメーションが終わったら#splashエリアをフェードアウト
});

引用元：https://coco-factory.jp/ugokuweb/move01/4-1-2/

投稿日：2022年04月06日

JS

ローディング画面（プログレスバー＋数字カウントアップ）

アーカイブ