11

我正在使用引导程序来创建我的网站，并且正在尝试使用进度条。我想要做的是在我完成 PHP 中的一个函数之后（我有 10 个函数要做），我将进度条的进度提高 10%。我相信他是使用 java-script 完成的，但我不确定如何使用 bootstrap 来完成，而且我当前的网络搜索还没有找到我可以使用的任何东西。（有页面加载进度到 100% 的示例，但我不知道这些是如何工作的）

<div class="progress progress-striped active">
    <div class="bar" style="width: 0%;"></div>
</div>

以上是我对引导进度条的 HTML 定义。我知道更改宽度会更改填充内容的百分比，但我不知道在完成一个功能后如何更改它（功能都在一个页面中一个接一个地运行）。

有人可以帮忙吗？或指出我正确的方向？

4

3 回答 3

8

您可以像这样更改进度条的宽度：

$('.progress-bar').css('width', percentageCompleted + '%');

每当值发生变化时，只需不断重复此percentageCompleted操作，直到该值变为 100。

演示

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>

（另见这个小提琴）

于 2016-03-14T12:52:40.537 回答
5

如果需要一步制作进度条的动画，可以做两行代码：

$progressBar.animate({width: "100%"}, 100);
$progress.delay(1000).fadeOut(500);

看演示https://jsfiddle.net/qLgv2Lfm/29/

于 2016-07-15T07:36:16.170 回答
4

更喜欢使用JQuery

$(".bar").css("width", "50%");

或在 Javascript 中

var bars = document.getElementsByClassName("bar");
bars[0].style.width = "50%";
于 2013-08-30T10:47:30.027 回答