Javascript 继续运行进度条

我想在continue中运行此进度条，就像%在

100%

时一样，它将再次从

0%

重新启动，并继续从

0%

运行到

100%

，在此处查看我的演示

$（文档）.ready（函数（）{
var progressbar=$（“#进度条”）；
max=progressbar.attr（'max'）；
时间=（1000/最大值）*5；
value=progressbar.val（）；
var加载=函数（）{
数值+=1；
addValue=progressbar.val（值）；
$（'.progress value'）.html（value+'%'）；
变量$ppc=$（“.进度饼图”），
度=360*值/100；
如果（值>50）{
$ppc.addClass（'gt-50'）；
}
$（'.ppc progress fill'）.css（'transform'，'rotate（'+deg+'deg'））；
$（'.ppc percents span'）.html（值+'%'）；
如果（值==最大值）{
clearInterval（动画）；
}
};
var animate=setInterval（函数（）{
加载（）；
}，时间）；
});
/*饼图*/
.进度饼图{
宽度：200px；
高度：200px；
边界半径：50%；
背景色：#E5；
位置：相对位置；
}
.progress-pie-chart.gt-50{
背景色：#81CE97；
}
.ppc进展{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算（50%-100px）；
顶部：calc（50%-100px）；
宽度：200px；
高度：200px；
剪辑：rect（0，200px，200px，100px）；
}
.ppc进度。ppc进度填写{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算（50%-100px）；
顶部：calc（50%-100px）；
宽度：200px；
高度：200px；
剪辑：rect（0，100px，200px，0）；
背景：#81CE97；
变换：旋转（60度）；
}
.gt-50.ppc进度{
剪辑：rect（0，100px，200px，0）；
}
.gt-50。ppc进度。ppc进度填充{
剪辑：rect（0，200px，200px，100px）；
背景：#e5；
}
.ppc百分比{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算值（50%-173.91304px/2）；
顶部：calc（50%-173.91304px/2）；
宽度：173.91304px；
高度：173.91304px；
背景：#fff；
文本对齐：居中；
显示：表格；
}
.ppc百分跨度{
显示：块；
字号：2.6em；
字体大小：粗体；
颜色：#81CE97；
}
.pcc百分比包装器{
显示：表格单元格；
垂直对齐：中间对齐；
}
.进度饼图{
保证金：50px自动0；
}

%
我改变了这一点：

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

致：

代码片段：


$（文档）.ready（函数（）{
var progressbar=$（“#进度条”）；
max=progressbar.attr（'max'）；
时间=（1000/最大值）*5；
value=progressbar.val（）；
变量加载=函数（）{
数值+=1；
addValue=progressbar.val（值）；
$（'.progress value'）.html（value+'%'）；
变量$ppc=$（“.进度饼图”），
度=360*值/100；
如果（值>50）{
$ppc.addClass（'gt-50'）；
}
$（'.ppc progress fill'）.css（'transform'，'rotate（'+deg+'deg'））；
$（'.ppc percents span'）.html（值+'%'）；
如果（值==最大值）{
数值=0；
$ppc.removeClass（'gt-50'）；
}
};
var animate=setInterval（函数（）{
加载（）；
}，时间）；
});
/*饼图*/
.进度饼图{
宽度：200px；
高度：200px；
边界半径：50%；
背景色：#E5；
位置：相对位置；
}
.progress-pie-chart.gt-50{
背景色：#81CE97；
}
.ppc进展{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算（50%-100px）；
顶部：calc（50%-100px）；
宽度：200px；
高度：200px；
剪辑：rect（0，200px，200px，100px）；
}
.ppc进度。ppc进度填写{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算（50%-100px）；
顶部：calc（50%-100px）；
宽度：200px；
高度：200px；
剪辑：rect（0，100px，200px，0）；
背景：#81CE97；
变换：旋转（60度）；
}
.gt-50.ppc进度{
剪辑：rect（0，100px，200px，0）；
}
.gt-50。ppc进度。ppc进度填充{
剪辑：rect（0，200px，200px，100px）；
背景：#e5；
}
.ppc百分比{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算值（50%-173.91304px/2）；
顶部：calc（50%-173.91304px/2）；
宽度：173.91304px；
高度：173.91304px；
背景：#fff；
文本对齐：居中；
显示：表格；
}
.ppc百分跨度{
显示：块；
字号：2.6em；
字体大小：粗体；
颜色：#81CE97；
}
.pcc百分比包装器{
显示：表格单元格；
垂直对齐：中间对齐；
}
.进度饼图{
保证金：50px自动0；
}

%
我不太清楚您为什么要再次运行它，但无论如何，请查看下面的代码片段

基本上，这里引入了一个
iteration
变量和一个
maxIteration
变量
maxIteration
是您要执行的最大迭代次数，我在这里将其设置为
1
。而
iteration
是其值在每个循环中递增的变量。因此，在循环结束时，有一个条件检查迭代是否继续，否则停止

片段：


$（文档）.ready（函数（）{
var迭代=0；
var maxIteration=1；
var progressbar=$（“#进度条”）；
变量$ppc=$（“.进度饼图”）；
var progressValue=$（'.progressValue'）；
var max=progressbar.attr（'max'）；
风险值时间=（1000/最大值）*5；
var值=progressbar.val（）；
var deg=360*值/100；
变量
if (value == max) {
    value = 0;
    $ppc.removeClass('gt-50');
}