如何停止進度條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，作爲進度條上設置的最大值。

注意：我已將最大值設置爲100，以顯示從1到10％的進度。

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>