Bootstrap进度条的进展

Question

我正在使用Bootstrap来创建我的网站，并尝试使用进度条。我的目标是，在完成PHP中的一个函数后（我有10个函数要执行），将进度条的进度提高10％。我相信这可以使用javascript实现，但是我不确定如何在Bootstrap中实现，而且我目前的网络搜索没有找到任何可用的东西。（有关页面加载时进度达到100％的示例，但我不知道它们的工作原理）

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

这是我的Bootstrap进度条的HTML定义。我知道更改宽度会更改填充的百分比，但我不知道如何在完成函数后更改它（所有函数都在一个页面上按顺序运行）。

有人能帮忙吗？或者指点我正确的方向？

- NoLiver92

---

@JonathanRomer 我对这门语言很了解，但这是我第一次使用Bootstrap进度条，所以我需要一些帮助。这就是论坛的用途：获取帮助！感谢论坛，现在我有了更好的理解，正在学习中。你的帖子既不是有益的，也不是建设性的。没有必要因为我想学习而攻击我！！！如果你不能提供帮助，请不要浪费时间发帖！ - NoLiver92

我看了你的帖子后，意识到我的错误。我能够看到你为这个项目付出了无数个小时的努力，以便自己找到解决方案。很抱歉我一开始没有看到这一点，也很抱歉给你带来了不便。 - JonathanRomer

Answer 1

您可以通过以下方式更改进度条的宽度：

$('.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>

（参见此Fiddle）

- John Slegers

Answer 2

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

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

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

- user2347746

Answer 3

建议使用JQuery

来进行操作。

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

或者在Javascript中。

var bars = document.getElementsByClassName("bar");
bars[0].style.width = "50%";

- Aelios

---

好的，这个可行，谢谢 :) 原因是我按照 Bootstrap 的说法把 jQuery 脚本声明放在底部了，所以它没有起作用。将其移到 head 中就可以了，谢谢。 - NoLiver92

您几乎肯定应该将其保留在底部，并调整您的代码以适应。 - BenLanc

你也可以使用以下代码更新aria值：**$('.bar').css('width', '50%').attr('aria-valuenow', 50);**，来源于#21182058。 - Anthony