jQueryでパーセンテージ付きのプログレスバーを実装する

ローディング画面などでバーが右に伸びていくプログレスバーをご覧になったことがあると思います。

当記事ではjQueryを使用して、このプログレスバーをパーセンテージ付きで実装する方法について記しています。
コード量は少ないので、ライブラリは使用せずに実装します。

実装イメージ

今回実現したいものは下記のようなパーセンテージ付きのプログレスバーになります。

jQueryで実装します。

まずはパーセンテージなしのプログレスバーを実装

前回の記事(jQueryでプログレスバーを実装する)で、パーセンテージなしのプログレスーバーを実装する方法を書きました。
こちらのコードに少し付与して、パーセンテージ付きのプログレスーバーを実現します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>now loading...</p>
<div class="progBar">
	<p class="bar"></p>
</div>

<style>
	.progBar{
		width:400px;
		height:50px;
		background-color:#ececec;
		position:relative;
		border-radius:10px;
		overflow: hidden;
	}
	.progBar .bar{
		width:0%;
		height:100%;
		background-color:#29B6F6;
		position:absolute;
		top: 0;
	}
</style>

<script>
	const time_mili     = 2000              //完了までの時間（ミリ秒
	const time_second   = time_mili / 1000  //完了までの時間（秒

	//完了までの時間を設定、アニメーション開始
	$(".progBar .bar").css("transition",time_second+"s linear")
	$(".progBar .bar").width("100%")
</script>

パーセンテージのカウンターを追加

上記のコードに下記のHTML・CSS・JSを追加します。
HTMLはprogBarクラスのdivの中に入れます。

<p class="percent">0%</p>

<style>
	.percent{
		position: relative;
		color: #fff;
		z-index:2;
		font-size: 26px;
		font-weight: bold;
		margin-left: 10%;
		top: 50%;
		transform: translateY(-50%);
	}
</style>

<script>
	//パーセンテージを更新
	const interval      = time_mili / 100   //処理間隔
	let parsent=0
	let changePercent = setInterval(function(){
		parsent++
		$(".progBar .percent").html(parsent+"%")

		if(parsent==100){
			clearInterval(changePercent)
		}
	},interval)
</script>

下記のデモで動きをご確認いただけます。
『実行』ボタンクリックで動くようにしています。

ソースコード全文

最後にソースコードを全文載せておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>now loading...</p>
<div class="progBar">
	<p class="bar"></p>
	<p class="percent">0%</p>
</div>

<style>
  .progBar{
		width:400px;
		height:50px;
		background-color:#ececec;
		position:relative;
		border-radius:10px;
        overflow: hidden;
	}
	.progBar .bar{
		width:0%;
		height:100%;
		background-color:#29B6F6;
		position:absolute;
		top: 0;
	}
	.percent{
		position: relative;
		color: #fff;
		z-index:2;
		font-size: 26px;
		font-weight: bold;
		margin-left: 10%;
		top: 50%;
		transform: translateY(-50%);
	}
</style>

<script>
	const time_mili     = 2000              //完了までの時間（ミリ秒
	const time_second   = time_mili / 1000  //完了までの時間（秒
	const interval      = time_mili / 100   //処理間隔

	//完了までの時間を設定、ローディングバーアニメーション開始
	$(".progBar .bar").css("transition",time_second+"s linear")
	$(".progBar .bar").width("100%")

	//パーセンテージを更新
	let parsent=0;
	let changePercent = setInterval(function(){
		parsent++
		$(".progBar .percent").html(parsent+"%")

		if(parsent==100){
			clearInterval(changePercent)
		}
	},interval)
</script>

以上、jQueryでパーセンテージ付きのプログレスバーを実装する方法でした。