ローディング画面などでバーが右に伸びていくプログレスバーをご覧になったことがあると思います。
当記事では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>
下記のデモで動きをご確認いただけます。
『実行』ボタンクリックで動くようにしています。
0%
ソースコード全文
最後にソースコードを全文載せておきます。
<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でパーセンテージ付きのプログレスバーを実装する方法でした。
コメント