我已经从w3school看到了此页面的进度条。我是bootstrap和Web编程的新手。可以在5秒内完成100%?就像加载进度条一样。
这样做的正确方法是什么?
答案 0 :(得分:2)
这是使用twitter bootstrap和jQuery的可能解决方案。
Fiddler:https://jsfiddle.net/f6hLt9ak/2/
我已经使用window.setInterval每半秒设置一次进度条的值。进度条达到100%后,我将值重置为0.
<强> HTML:强>
<div class="row">
<div class="col-xs-8">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
</div>
</div>
<强> JS 强>
var progressBar = $('.progress-bar');
var percentVal = 0;
window.setInterval(function(){
percentVal += 10;
progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');
if (percentVal == 100)
{
percentVal = 0;
}
}, 500);
我希望这段代码示例可以让您了解如何继续进行。
答案 1 :(得分:2)
如果您对添加进度条感到困惑。请尝试自动进度条
Pace与网页集成非常简单。
在您的网页上添加/复制样式表
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-barber-shop.css">
并添加JS文件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>
坐下来Pace会做的其他事情