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

问题

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 from right to left? The reason behind this question is that I have a range of numbers that can go from positive to negative. The idea is to place two progress bars next to each other and have the right one display the percentage range when the value is positive, and the left bar to display the percentage range when value is negative. For now, the values are static, but these will be 'live' in the future.

Any input on this, and if possible, a pointer to similar projects? I haven't really found anything relevant done with this framework.

I've looked at posts like this one: Reverse progressbar using CSS3, but I'm not sure if this is the way to go when using Bootstrap. Is there some sort of override available for this kind of functionality, in regards to css?

Right now, my progress bar is setup like 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>

回答1:

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.

回答2:

You can adjust an actual progress bar element via CSS in a couple different ways.

progress {
  transform: rotate(180deg);
}

or better yet

progress {
  direction: rtl;
}

回答3:

If I could propose a different option, it's even easier than this. Think about 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 however you like inside it. Here is a quick fiddle of this idea for reference.

回答4:

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>

回答5:

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

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

回答6:

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>

回答7:

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

回答8:

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

回答9:

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

来源：https://stackoverflow.com/questions/16910523/is-it-possible-to-have-a-progress-bar-move-from-right-to-left-based-on-a-negativ

标签

css

twitter-bootstrap

progress-bar