如何停止进度条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>