jQueryでプログレスバーを実装する

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

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

実装イメージ

今回実現したいものは下記のようなプログレスバーになります。
jQueryで実装します。

HTML

HTMLはシンプルですね。jQueryもCDNで読み込んでおきます。

<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>

CSS

.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;
}

jQuery

1行目で完了までの時間を指定できます。下記では4秒に設定しています。

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

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

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

now loading…

ソースコード全文

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

<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>

パーセンテージ付きのプログレスバーを実装したい場合は下記記事が参考になるかと思います。
jQueryでパーセンテージ付きのプログレスバーを実装する

以上、jQueryでプログレスバーを実装する方法でした。