引导进度条

Question

我有一个销售目标，我希望每个季度都能达到，比如100。

我的进度条应该显示我到目前为止在qtr中销售的速度。

如果我步履蹒跚

超速

下面是踢球者，我想不出一种方法可以将红色标记显示为绿色条的准确百分比，因为它是百分之一的百分比。 Bootstrap似乎只让我叠加进度条，但我只想将该进度条的百分比显示为红色或蓝色。

Answer 1

您可以使用 box-shadow：inset 在右侧创建内部边框 - 在进度条内部（您可以使用js来确定所需的颜色和大小），而无需更改整体酒吧的外部尺寸。我使用了35％宽度的进度条和-13px的盒子阴影以及红色。这些可以相对于您的销售数据计算并相应地进行修改。

请注意 - 为了css规则我使用了内联样式 - 我通常会把它拉出来并将它放在外部CSS中，但我这样做是为了这个例子。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Bootstrap Stacked进度条可能会保存您，请检查：Stacked progress bar