chung neng NG chung neng NG - 2 months ago 8
CSS Question

Make my progress bar show value from right to left with define a new progress::value

I have a progress bar that show from left to right. I need to make another which is same style progress but will show from left to right.

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


I refer sample from web and it define using
::-webkit-progress-value
, how could i make another
::-webkit-progress-value
and also make it show from right to left?

Answer

Generally, many elements flip their horizontal rendering when their direction attribute is changed from ltr (which is the default) to rtl, which stands for right-to-left (to be compatible with right-to-left languages, such as Arabic or Hebrew).

The <progress> element is not different. Just give CSS something to cling to (such as a special class) and set its direction: rtl;.

Here is a small snippet based on the code you posted.

/* 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>

I don't know what is your markup, as you did not post it, but you may need to adjust the .valuebar positioning.

Here is a code pen you can toy with.

Comments