Crescer progressão largura da barra da direita para a esquerda

Question

Eu tenho uma barra de progressão que, quando eu aumentar a largura dele, ele vai da esquerda para a direita .Como 0% é sobre o lado esquerdo do meu bar e 100% é a extremidade direita do meu bar.

Eu me pergunto se é de qualquer maneira que eu poderia fazer a minha barra de progresso "crescer" da direita para a esquerda.Algo como "a 100%".

Este é o meu código html:

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

E o 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%;
}

Eu configurar um violino com meu bar também : Barra De Progresso

Answer 1

Você pode fazer isso facilmente com o posicionamento.Definir o recipiente a ser position: relative;, absolutamente posição da barra de progresso e, em seguida, especificar right: 0; para colocá-lo contra a borda direita do recipiente.

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

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

Aqui é um violino.

Answer 2

Há muitas maneiras de fazer isso, então, para responder sua pergunta, sim.Eu parágrafos seu código e ajustado css um pouco da seguinte forma: 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

Basta editar a conclusão-bar1 a seguinte

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