Czy pasek postępu może się poruszać od prawej do lewej w oparciu o wartość ujemną na Twitterze Bootstrap?

Question

Zanim przystąpimy do tego projektu, chciałbym się dowiedzieć, czy w ogóle możliwe jest odwrócenie paska postępu znajdującego się w strukturze bootstrapu, aby mógł wyświetlać wartość od prawej do lewej? Powodem tego pytania jest to, że mam zakres liczb, które mogą przejść od pozytywnego do negatywnego. Chodzi o to, aby umieścić dwa paski postępu obok siebie i mieć właściwy zakres procentowy, gdy wartość jest dodatnia, a lewy pasek, aby wyświetlić zakres procentowy, gdy wartość jest ujemna. Na razie wartości są statyczne, ale będą one "na żywo" w przyszłości.

Jakieś dane wejściowe na ten temat, a jeśli to możliwe, wskaźnik do podobnych projektów? Tak naprawdę nie znalazłem nic istotnego w tym zakresie.

Sprawdziłem posty takie jak ten: Reverse progressbar using CSS3, ale nie jestem pewien, czy to jest sposób, aby przejść, gdy za pomocą Bootstrap. Czy istnieje jakiś sposób obejścia tego rodzaju funkcjonalności w odniesieniu do css?

Teraz mój pasek postępu jest skonfigurowany tak:

 <li>Speed<span class="pull-right"><em>@Math.Round(DepthValue, 2) m/min</em></span> 
      <div class="progress progress-success"> 
       <div class="bar" style="width: @Model.SpeedRangePercentage%"></div> 
      </div> 
     </li> 

Answer 1

Właściwie to rozgryzłem! :) Okazało się być naprawdę łatwe, a nawet odpowiedź znalazła się w poprzednio połączonym poście;

<li>Speed<span class="pull-right"><em>@Math.Round(DepthValue, 2) m/min</em></span> 
     <div class="progress progress-success"> 
      <div class="bar" style="width: @Model.SpeedRangePercentage%; display: block; float: right;"></div> 
     </div> 
    </li> 

Dodawanie stylów "display: block;" i "float; right" spowodował przesunięcie paska z prawej na lewą.

Answer 2

Spróbuj zmienić kolory tła i pierwszego planu i stopniowe zmniejszanie postępu wartość bar. To może zadziałać, ale będzie bardzo mylące.

Answer 3

Gdybym mógł zaproponować inną opcję, jest to jeszcze łatwiejsze. Pomyśl o tym w ten sposób:

<div class="progress"> 
    <div class="progress-bar progress-bar-info" role="progressbar" style="width:40%;"></div> 
</div> 

Element .progress jest elementem blokowym, więc po prostu unosić lub umieść .progress-bar jednak chcesz w środku. Here to szybkie skrzypce tego pomysłu w celach informacyjnych.