進行状況バーを停止する方法Jquery

Question

HTML5 + CSS3とjQueryプログレスバーを作成しようとしていますが、その読み込みと停止は例えば10％の幅で開始する必要がありますが、HTMLのMAX値私の場合は10％です。ここで

ロードと仕上がり時にプログレスバーがどのように見えるべきかの画像です：

は、誰かが私に私のミスであるか、いくつかの簡単な解決策に私を導くいくつかのアドバイスを与えることはできますか？

これは、これまでの私のコードです：

HTML：

<form> 
    <progress min="0 " value="0" max="10" id="firstProgressBar"></progress> 
    <span class="firstProgress">0%</span> 
</form> 

Javascriptを：

var firstProgressBar = $('#firstProgressBar'), 
    max = firstProgressBar.attr('max'), 
    value = firstProgressBar.val(), 
    time = (500/max)*10; 

function firstLoading(){ 
    value+=1; 
    var addValue = firstProgressBar.val(value); 

    $('.firstProgress').html(value + '%'); 

    if (value == max) { 
     clearInterval(animate); 
    } 

}; 

var animate = setInterval(function(){ 
    firstLoading(); 
}, time); 

ここではフィドルのように私の完全なコードです：https://jsfiddle.net/0ekbyrt5/

Answer 1

私が編集しましたあなたのjsfiddle。主な問題は、jsfiddleがjQueryを読み込まなかったことです（誤ったフィドルバージョンかもしれません）。お役に立てれば。

進捗値が最大の場合、プログレスバーはいっぱいです。 10％で停止する場合は、進行状況の最大値を10で除算して、進行状況バーに設定する最大値として設定する必要があります。

注：1から10％の進捗状況を示すためにmaxを100に設定しました。

var firstProgressBar = $('#firstProgressBar'), 
 
    max = firstProgressBar.attr('max')/10, 
 
    value = firstProgressBar.val(), 
 
    time = (500/max) * 10; 
 

 
function firstLoading() { 
 
    value += 1; 
 
    var addValue = firstProgressBar.val(value); 
 

 
    $('.firstProgress').html(value + '%'); 
 

 
    if (value >= max) { 
 
    clearInterval(animate); 
 
    } 
 

 
}; 
 

 
var animate = setInterval(function() { 
 
    firstLoading(); 
 
}, time);

progress::-webkit-progress-bar { 
 
    width: 248px; 
 
    height: 14px; 
 
    background-color: #e3e3e3; 
 
    border-radius: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <progress min="0 " value="0" max="100" id="firstProgressBar"></progress> 
 
    <span class="firstProgress">0%</span> 
 
</form>