我正在使用引导程序来创建我的网站，并且我正在尝试使用进度栏。我想做的是在 PHP 中完成一个函数之后（我有 10 个函数要做），我将进度条的进度推进 10%。我相信他是使用 java 脚本完成的，但我不确定如何使用 bootstrap 来完成它，而且我当前的网络搜索还没有找到任何我可以使用的东西。 （有一些页面加载进度达到 100% 的示例，但我不知道它们是如何工作的）
<div class="progress progress-striped active">
<div class="bar" style="width: 0%;"></div>
</div>
上面是我对引导进度条的 HTML 定义。我知道更改宽度会改变填充内容的百分比，但我不知道在完成一个功能后如何更改它（功能都在一个页面中一个接一个地运行）。
有人可以帮忙吗？或指出我正确的方向？
您可以像这样更改进度条的宽度：
$('.progress-bar').css('width', percentageCompleted + '%');
每当值出现时，请继续重复此操作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>
（也可以看看这个小提琴)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
