Как визуализировать элемент прогресса справа налево?

Question

У меня есть индикатор выполнения, который отображается слева направо. Мне нужно сделать другой, который будет тем же успехом, но будет показан справа налево.

Вот мое определение стиля:

progress, progress[role] { 
    -webkit-appearance: none; 
    appearance: none; 
    border: none; 
    background-size: auto; 
    height: 50px; 
    width: 100%; 
    padding-top: 10px; 
} 
progress[value]::-webkit-progress-bar { 
    background-color: grey; 
    border-radius: 2px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
} 
progress[value]::-webkit-progress-value { 
    background-image: 
     -webkit-linear-gradient(-45deg, 
           transparent 33%, rgba(0, 0, 0, .1) 33%, 
           rgba(0,0, 0, .1) 66%, transparent 66%), 
     -webkit-linear-gradient(top, 
           rgba(255, 255, 255, .25), 
           rgba(0, 0, 0, .25)), 
     -webkit-linear-gradient(left, #09c, #f44); 
    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
} 

.valuebar { 
    position: relative; 
} 
.valuebar h3 { 
    color: #fff; 
    left: 1em; 
    line-height: 1; 
    position: absolute; 
} 

Я использовал выборку из Интернета, который использует ::-webkit-progress-value.

Как я могу сделать рендер справа налево?

Answer 1

Как правило, многие элементы переворачивать их горизонтальную визуализацию, когда их атрибут direction изменяются от ltr (который по умолчанию) для rtl, которая выступает за справа налево (чтобы быть совместимыми с письмом справа налево языков, таким как арабский или иврит).

Элемент <progress> не отличается. Просто дайте CSS что-то цепляться (например, специальный класс) и установите его direction: rtl;.

Вот небольшой фрагмент, основанный на коде, который вы опубликовали.

/* this is the important bit */ 
 
progress.rtl { 
 
    direction: rtl; 
 
} 
 
progress, 
 
progress[role] { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    border: none; 
 
    background-size: auto; 
 
    height: 50px; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
} 
 
progress[value]::-webkit-progress-bar { 
 
    background-color: grey; 
 
    border-radius: 2px; 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
 
} 
 
progress[value]::-webkit-progress-value { 
 
    background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #09c, #f44); 
 
    border-radius: 2px; 
 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
 
} 
 
.valuebar { 
 
    position: relative; 
 
} 
 
.valuebar h3 { 
 
    color: #fff; 
 
    left: 1em; 
 
    line-height: 1; 
 
    position: absolute; 
 
}

<progress value="59" max="100">59%</progress> 
 
<br /> 
 
<progress class="rtl" value="59" max="100">59%</progress>

Я не знаю, что ваша разметка, как вы не отправляли, но вам, возможно, потребуется настроить .valuebar позиционирование.

Здесь code pen вы можете игрушка с.