如何阻止进度吧Jquery

Question

我正在尝试创建HTML5 + CSS3和jQuery进度条，让我们说它应该开始加载并停止例如它的宽度的10％但是我设法创建只计算MAX值在我的情况下，HTML为10％。

以下是完成加载后progressBar应该是什么样子的图片：

有人可以给我一些建议，我的错误在哪里，或者引导我找到一些简单的解决方案？

到目前为止，这是我的代码：

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

以下是我的完整代码：Fiddle：https://jsfiddle.net/0ekbyrt5/

Answer 1

我已经编辑了你的jsfiddle。主要问题是jsfiddle没有加载jQuery（也许这是一个错误的小提琴版本）。希望这会有所帮助。

当进度值为最大值时，进度条已满。如果要停止在10％，则必须将进度的最大值除以10作为要在进度条上设置的最大值。

注意：我将max设置为100只是为了显示1到10％的进度。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;