Процент прогресс бар самозагрузки

Question

У меня есть цель продаж я хочу, чтобы поразить каждую четверть, скажем, 100.

Мой прогресс бар должен показать, что мой темп с продаж до сих пор в Qtr.

, если им за темпами

За темпами

Heres кикер, я не могу придумать способ, чтобы показать красную метку в виде не точный процент зеленой полосы, поскольку ее процент процента. Кажется, что Bootstrap позволяет мне стекировать индикаторы выполнения, но я просто хочу показать процент этого индикатора выполнения как красный или синий.

Answer 1

Вы можете использовать бокс-тень: застегивается создать внутреннюю границу с правой стороны - в строке прогресса (вы можете использовать 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"> 
 
\t <div class="progress-bar progress-bar-success" style="width: 35%; box-shadow:inset -13px 0px 0px red;"> 
 
\t \t <span class="sr-only">35% Complete (success)</span> 
 
\t </div> 
 
    </div>

Answer 2

Bootstrap Линейчатая прогресс может спасти вас, проверьте: Stacked progress bar