Bootstrap進度條進度

Question

我正在使用bootstrap來創建我的網站，我正在嘗試使用進度條。 我想要做的是在用PHP完成一個函數之后（我有10個函數要做）我將條形圖的進度提前10％。 我相信他是使用java腳本完成的，但我不確定如何使用bootstrap，我當前的網絡搜索沒有發現我可以使用的任何東西。 （有一些例子，當頁面加載進度到100％，但我不知道這些是如何工作的）

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

以上是我對bootstrap進度條的HTML定義。 我知道改變寬度會改變填充的百分比但我不知道在完成一個功能之后如何改變它（功能都在一個頁面中一個接一個地運行）。

有人可以幫忙嗎？ 還是指出我正確的方向？

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> 

（另見小提琴 ）

Answer 2

更喜歡使用JQuery

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

或者在Javascript中

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

Answer 3

如果您需要一步制作進度條的動畫，則可以生成兩行代碼：

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

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