Is it possible for the progress bar to move from right to left based on a negative value on Twitter Bootstrap?

Question

Before embarking on this project, I would like to know if it is even possible to cancel the progress bar found in the bootstrap framework so that it can display the value going from right to left? The reason for this question is that I have a series of numbers that can go from positive to negative. The idea is to position the two execution bars next to each other and have the correct indication of the percentage range when the value is positive, and the left bar displays the percentage range when the value is negative. So far, the values ​​are static, but in the future they will "live."

Any input on this and, if possible, a pointer to similar projects? I really did not find anything suitable in this structure.

I watched posts like this one: Reverse progress bar using CSS3 , but I'm not sure if this will be the way to use Bootstrap. Is there any kind of overrides available for this kind of functions regarding css?

Now my progress bar is set up like this:

<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

I really understood that! :) It turned out to be really easy, and indeed the answer was found in a previously related post;

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

Adding styles: "display: block;" and "float, right" made the panel move from right to left.

Answer 2

You can customize the actual progress bar element with CSS in several different ways.

 progress { transform: rotate(180deg); } 

or better yet

 progress { direction: rtl; } 

Answer 3

If I could offer another option, this is even easier than that. Think of it this way:

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

The .progress element is a block level element, so just float or position the .progress-bar as you like inside it. Here is a quick script of this idea for reference.

Answer 4

In addition to the accepted answer in Bootstrap 4+, the progress bar now uses Flex and floating will not work.

Now do the following (add " justify-content-end "):

 <div class="progress justify-content-end"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div> 

Answer 5

Try switching the background and foreground colors and gradually decrease the progress bar. It may work, but it will be VERY confusing.

Answer 6

Just just interchange the background colors of progress and progress bar . Thus, if the progress bar width changes, it will look as if it is progressing in the opposite way. Enabling .css Style

 .progress{ background-color: #007bff; } .progress-bar{ background-color: #e9ecef; } 

Answer 7

Use transform: rotate(180deg); on progress class.

Answer 8

In Bootstrap 4, simply change the div with the .progress class to flex-direction: row-reverse or use the flex-row-reverse helper class (as indicated below):

 <div class="progress flex-row-reverse"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> 

Answer 9

  You can add the margin left auto (**.ml-auto**) to the progress bar 

 <div class="progress"> <div class="progress-bar ml-auto" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div>