Aumentar el ancho de la barra de progresión de derecha a izquierda

Question

Tengo una barra de progresión que cuando aumento el ancho de la misma, va de izquierda a derecha.Como 0% está a la izquierda de mi barra y 100% está en el extremo derecho de mi barra.

Me pregunto si hay alguna forma de hacer que mi barra de progreso "crezca" de derecha a izquierda. Algo así como "-100%".

Este es mi código html:

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

Y el 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%;
}

También instalé un violín con mi barra: Barra de progreso

Answer 1

Puedes hacerlo fácilmente con el posicionamiento.Configure el contenedor para que sea position: relative;, coloque absolutamente la barra de progreso y luego especifique right: 0; para colocarlo contra el borde derecho del contenedor.

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

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

Aquí hay un violín.

Answer 2

Hay muchas maneras de hacer esto, para responder a su pregunta, sí. He bifurcado su código y se ajusté ligeramente a los CSS de la siguiente manera: 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

Simplemente edite la finalización-Bar1 a seguir

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