Grow progress Bar Larghezza da destra a sinistra

Question

Ho una barra di progressione che quando aumenterò la larghezza di esso, va da sinistra a destra.Come lo 0% è sulla sinistra del mio bar e il 100% è il lontano diritto del mio bar.

Mi chiedo se è in qualche modo il modo in cui potrei rendere la mia barra dei progressi "crescere" da destra a sinistra. Qualcosa come "-100%".

Questo è il mio codice HTML:

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

.

e il 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%;
}

.

Ho configurato un violino con il mio bar anche: barra di avanzamento

Answer 1

Puoi farlo facilmente con il posizionamento.Impostare il contenitore per essere position: relative;, posizionare assolutamente la barra di avanzamento e quindi specificare right: 0; per posizionarlo contro il bordo destro del contenitore.

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

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

.

Ecco un Fiddle .

Answer 2

Ci sono molti modi per farlo, quindi per rispondere alla tua domanda, sì. Ho biforcato il tuo codice e ho regolato le CSS leggermente come segue: http://jsfiddle.net/adammenlen/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 modificare il completamento-bar1 per seguire

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

.