Vergrößern Sie die Breite des Fortschrittsbalkens von rechts nach links

Question

Ich habe einen Fortschrittsbalken, der von links nach rechts verläuft, wenn ich die Breite vergrößere.Bei 0 % befindet es sich links in meiner Leiste und bei 100 % ganz rechts in meiner Leiste.

Ich frage mich, ob es eine Möglichkeit gibt, meinen Fortschrittsbalken von rechts nach links „wachsen“ zu lassen, etwa „-100 %“.

Das ist mein HTML-Code:

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

Und das 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%;
}

Ich habe auch eine Geige mit meiner Bar aufgebaut: Fortschrittsanzeige

Answer 1

Mit der Positionierung geht das ganz einfach.Stellen Sie den Container auf ein position: relative;, Positionieren Sie den Fortschrittsbalken absolut und geben Sie ihn dann an right: 0; um es am rechten Rand des Behälters zu platzieren.

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

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

Hier ist ein Geige.

Answer 2

Es gibt viele Möglichkeiten, dies zu tun, um Ihre Frage zu beantworten, ja. Ich habe Ihren Code gegabelt und CSS leicht angepasst wie folgt: http://jsfiddle.net/adamfullen/69mj8/

generasacodicetagpre.

Answer 3

Bearbeiten Sie einfach den Abschluss-Bar1, um zu folgen

generasacodicetagpre.