引導進度條的百分比

Question

我有一個每個季度都想達到的銷售目標，比如 100。

我的進度條應該顯示我在 Qtr 中到目前為止的銷售進度。

如果我落后了

超速

這是踢球者，我想不出一種方法來將紅色標記顯示為綠色條的准確百分比，因為它是一個百分比的百分比。 Bootstrap 似乎只讓我堆疊進度條，但我只想將該進度條的百分比顯示為紅色或藍色。

Answer 1

您可以使用box-shadow:inset在右側 - 進度條內部創建一個內邊框（您可以使用 js 來確定所需的顏色和大小），而無需更改進度條的整體外部尺寸。 我使用了 35% 寬度的進度條和 -13px 的框陰影和紅色。 這些可以相對於您的銷售數字進行計算並相應地進行修改。

為此請注意 - 我為 css 規則使用了內聯樣式 - 我通常會將它拉出來並將其放在外部 CSS 中，但我在這個示例中是這樣做的。

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%; box-shadow:inset -13px 0px 0px red;"> <span class="sr-only">35% Complete (success)</span> </div> </div>

Answer 2

Bootstrap Stacked progress bar 可能會拯救你，檢查： Stacked progress bar