引导进度条的百分比答案

【问题标题】：Percent of a bootstrap progress bar引导进度条的百分比
【发布时间】：2016-03-16 23:37:26
【问题描述】：

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

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

如果我落后了

超速

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

【问题讨论】：

标签： javascript twitter-bootstrap progress-bar

【解决方案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>

【讨论】：

这是一个聪明的方法！

【解决方案2】：

Bootstrap Stacked 进度条可能会救你，检查：Stacked progress bar

【讨论】：