Увеличить ширину бара прогресса справа налево

Question

У меня есть прогрессирующий бар, который, когда я увеличиваю ширину, она идет слева направо.Как 0%, а слева от моей бары и на 100% это далеко от моего бара.

Интересно, может ли это, что я мог бы сделать мой прогресс бар «расти» справа налево. Что-то вроде «-100%».

Это мой HTML-код:

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

.

и 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%;
}

.

Я тоже настроил скрипку с баром: Бар прогресса

Answer 1

Вы можете сделать это легко с позиционированием.Установите контейнер для position: relative;, абсолютно установите панель прогресса, а затем укажите right: 0;, чтобы разместить его против правого края контейнера.

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

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

.

Вот a widdle .

Answer 2

Есть много способов сделать это, чтобы ответить на ваш вопрос, да. Я развел ваш код и немного отрегулировал CSS следующим образом: 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

Просто отредактируйте завершенную BAR1, чтобы следить за

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

.