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

Question

Before even embarking on this project, I\'d like to know if it\'s at all possible to reverse the progress bar found in the bootstrap framework, so it can display a value going f

Answer 1

Further to the accepted answer, in Bootstrap 4+, the progress bar now uses Flex, and floating won't work.

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

Try switching background and foreground colors and gradually reducing progress bar value. It might work but it will be VERY confusing.

Answer 3

I actually figured it out! :) Turned out to be really easy, and indeed the answer was found in the previously linked 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" caused the bar to move from right to left.

Answer 4

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

Answer 5

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>

Answer 6

Simple just interchange the background colors of progress and progress bar. That way if the progress bar width changes it will look like it is progressing in reverse way. Including the .css style

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

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