Grow progression bar width from right to left

Question

I have a progression bar that when I increase the width of it, it goes from left to right . Like 0% it's on the left of my bar and 100% it's the far right of my bar.

I wonder if it's any way that I could make my progress bar "grow" from right to left.Something like "-100%".

This is my html code:

<div class="completion-bar1-wraper">
    <div class="completion-bar1"></div>
</div>

And the css:

div.completion-bar1-wraper{
    height: 12px;
    border: 1px solid #aaa;
    border-radius: 7px;
    background: #eee;
    box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
    margin-right: 4%;
    margin-left: 3%;
    margin-top: 19%;
}
div.completion-bar1{
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}

I set up a fiddle with my bar too : Progress Bar

Answer 1

You can do it easily with positioning. Set the container to be position: relative;, absolutely position the progress bar and then specify right: 0; to place it against right edge of the container.

div.completion-bar1-wraper {
   /*...*/
    position: relative;
}

div.completion-bar1 {
   /*...*/
    width: 70%;
    position: absolute;
    right: 0;
}

Here is a fiddle.

Answer 2

There's many ways to do this, so to answer your question, yes. I've forked your code and adjusted css slightly as follows: http://jsfiddle.net/adamfullen/69mJ8/

div.completion-bar1-wraper{
    height: 12px;
    border: 1px solid #aaa;
    border-radius: 7px;
    background: #eee;
    box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
    margin-right: 4%;
    margin-left: 3%;
    margin-top: 19%;
    position: relative;
}
div.completion-bar1{
    position: absolute;
    right:0;
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}

Answer 3

Just edit the completion-bar1 to following

div.completion-bar1{
    float: right;
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}