Ist es möglich, dass ein Fortschrittsbalken von rechts nach links bewegt wird, basierend auf einem negativen Wert in Twitter Bootstrap?

Question

Bevor ich mit diesem Projekt anfange, würde ich gerne wissen, ob es überhaupt möglich ist, den Fortschrittsbalken im Bootstrap-Framework umzukehren, sodass ein Wert von rechts nach links angezeigt werden kann. Der Grund hinter dieser Frage ist, dass ich eine Reihe von Zahlen habe, die von positiv zu negativ gehen können. Die Idee ist, zwei Fortschrittsbalken nebeneinander zu platzieren, wobei der rechte den Prozentbereich anzeigt, wenn der Wert positiv ist, und der linke Balken, um den Prozentbereich anzuzeigen, wenn der Wert negativ ist. Für den Moment sind die Werte statisch, aber diese werden in Zukunft "live" sein.

Irgendwelche Eingaben hierauf und, wenn möglich, einen Zeiger auf ähnliche Projekte? Ich habe wirklich nichts Relevantes mit diesem Framework gefunden.

Ich habe Posts wie diesen gesehen: Reverse progressbar using CSS3, aber ich bin mir nicht sicher, ob dies der Weg ist, wenn Sie Bootstrap verwenden. Gibt es eine Art Überschreibung für diese Art von Funktionalität, in Bezug auf CSS?

Gerade jetzt, mein Fortschrittsbalken ist Setup wie so:

 <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

Ich habe es tatsächlich herausgefunden! :) Es stellte sich heraus, dass es wirklich einfach war, und tatsächlich wurde die Antwort in dem zuvor verlinkten Post gefunden;

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

Hinzufügen von Stilen "display: block;" und "float; right" bewirkte, dass sich der Balken von rechts nach links bewegte.

Answer 2

Versuchen Hintergrund- und Vordergrundfarben Schalten und Fortschrittsbalken Wert schrittweise reduziert wird. Es könnte funktionieren, aber es wird sehr verwirrend sein.

Answer 3

Wenn ich eine andere Option vorschlagen könnte, ist es sogar einfacher als das. Denken Sie an es auf diese Weise:

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

Das .progress Element ist ein Block-Element, so dass nur schwimmen oder die .progress-bar positionieren Sie jedoch innerhalb es mögen. Here ist eine schnelle Geige dieser Idee als Referenz.