twitter-bootstrap 如何在引导程序中制作加载进度条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40166957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a loading progress bar in bootstrap?
提问by TraF TraF TraF
回答by Vimalan Jaya Ganesh
Here is a possible solution using twitter bootstrap and jQuery.
这是使用 twitter bootstrap 和 jQuery 的可能解决方案。
Fiddler: https://jsfiddle.net/f6hLt9ak/2/
提琴手：https: //jsfiddle.net/f6hLt9ak/2/
I have used window.setInterval to set the value for progress-bar every half second. Once the progress bar reaches 100%, I am resetting the value back to 0.
我使用 window.setInterval 每半秒设置一次进度条的值。一旦进度条达到 100%，我就会将该值重置为 0。
HTML:
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
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);
I hope this code sample will give you an idea on how to proceed at your end.
我希望此代码示例能让您了解如何进行最终操作。
回答by Rajeev Radhakrishnan
If you are confused to add a progress bar.Try automated progress bar
如果您对添加进度条感到困惑。尝试自动进度条
Pace is really simple to integrate with web pages.
Pace 与网页集成非常简单。
Add/Copy Stylesheet on your webpage
在您的网页上添加/复制样式表
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-barber-shop.css">
And add JS file
并添加JS文件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>
Sit back Rest of the things Pace will do
坐下来 Pace 会做的其他事情
