زيادة عرض شريط التقدم من اليمين إلى اليسار

Question

لدي شريط تقدم عندما أقوم بزيادة عرضه، فإنه ينتقل من اليسار إلى اليمين.مثل 0% يوجد على يسار الشريط الخاص بي و100% يوجد في أقصى يمين الشريط الخاص بي.

أتساءل عما إذا كان هناك أي طريقة يمكنني من خلالها جعل شريط التقدم الخاص بي "ينمو" من اليمين إلى اليسار. شيء مثل "-100%".

هذا هو كود HTML الخاص بي:

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

و السي اس :

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

هنا أ كمان.

Answer 2

هناك العديد من الطرق للقيام بذلك، لذلك للإجابة على سؤالك، نعم. لقد قمت بتوجيه رمزك وتعديل CSS قليلا كما يلي: http://jsfiddle.net/adamfullen/69mj8/

giveacodicetagpre.

Answer 3

فقط قم بتحرير Bar1 الإكمال إلى التالي

giveacodicetagpre.