jQuery Bootstrap 进度条进度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18531013/
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
Bootstrap progress bar progression
提问by NoLiver92
I am using bootstrap to create my website and I am trying to use a progress bar. What I am trying to do is after I complete a function in PHP (I have 10 functions to do) I advance the progress of the bar by 10%. I believe his is done using java-script but I am unsure on how to do it with bootstrap and my current web searches have not turned up anything I could use. (there are examples of when the page loads progress to 100% but I don't know how these work)
我正在使用引导程序来创建我的网站，并且我正在尝试使用进度条。我想要做的是在我完成 PHP 中的一个函数后（我有 10 个函数要做），我将进度条的进度提高 10%。我相信他是使用 java-script 完成的，但我不确定如何使用引导程序来完成它，而且我当前的网络搜索没有找到我可以使用的任何东西。（有页面加载进度到 100% 时的示例，但我不知道这些是如何工作的）
<div class="progress progress-striped active">
<div class="bar" style="width: 0%;"></div>
</div>
This above is my HTML definition of the bootstrap progress bar. I know changing the width changes the percentage of what is filled in but I don't know how to change it after I have completed a function (functions are all in one page ran one after another).
以上是我对引导进度条的 HTML 定义。我知道改变宽度会改变填充的百分比，但我不知道在完成一个功能后如何改变它（功能都在一页一页地运行）。
Could someone help? or point me in the right direction?
有人可以帮忙吗？或者指出我正确的方向？
采纳答案by Aelios
回答by John Slegers
You can change the width of your progress bar like this :
您可以像这样更改进度条的宽度：
$('.progress-bar').css('width', percentageCompleted + '%');
Just keep repeating this whenever the values of percentageCompletedchanges, until that value is 100.
只要值发生percentageCompleted变化就不断重复此操作，直到该值变为 100。
A demo
一个演示
var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');
setTimeout(function() {
$progressBar.css('width', '10%');
setTimeout(function() {
$progressBar.css('width', '30%');
setTimeout(function() {
$progressBar.css('width', '100%');
setTimeout(function() {
$progress.css('display', 'none');
$alert.css('display', 'block');
}, 500); // WAIT 5 milliseconds
}, 2000); // WAIT 2 seconds
}, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second.progress, .alert {
margin: 15px;
}
.alert {
display: none;
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="alert alert-success" role="alert">Loading completed!</div>(see also this Fiddle)
（另见这个小提琴）
回答by user2347746
If you need to make an animation of progress barr in one step, you can make two lines of code:
如果需要一步一步制作进度条的动画，可以制作两行代码：
$progressBar.animate({width: "100%"}, 100);
$progress.delay(1000).fadeOut(500);
see the demo https://jsfiddle.net/qLgv2Lfm/29/
