Augmenter la largeur de la barre de progression de droite à gauche

Question

J'ai une barre de progression qui, lorsque j'en augmente la largeur, va de gauche à droite.Comme 0 %, c'est à gauche de ma barre et 100 %, c'est à l'extrême droite de ma barre.

Je me demande s'il est possible de faire "agrandir" ma barre de progression de droite à gauche. Quelque chose comme "-100%".

Voici mon code html :

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

Et le 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%;
}

J'ai aussi installé un violon avec mon bar : Barre de progression

Answer 1

Vous pouvez le faire facilement avec le positionnement.Réglez le conteneur pour qu'il soit position: relative;, positionnez absolument la barre de progression puis précisez right: 0; pour le placer contre le bord droit du conteneur.

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

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

Voici une violon.

Answer 2

Il y a beaucoup de façons de le faire, afin de répondre à votre question, oui. J'ai fourchu votre code et ajusté CSS légèrement comme suit: http://jsfiddle.net/adamfull/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

Il suffit de modifier la barre d'achèvement1 à suivre

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