How I can do this progress bar?

Question

Example of what I want

Hi, my question is simple, just look at the pic above :)

How I can do that ?

If I put a background on the progress part of the bar, when the progress is on 10%, the background fill all the 10%, but I want to show only 10% of the background !

Maybe the solution is to put a grey progress bar above the 100% gradient progress bar, but I need to make a "reverse" border-radius ... I think that is not possible, so how I can do that ?

Answer 1

I'd use a background linear gradient for the coloured bar, and set the width to the same as the width of the progress bar.

i.e. background: linear-gradient(to right, yellow, #BD3D3D 100%);

e.g.

.progressbar {
  background: lightgray;
  width: 300px;
  height:20px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.progressbar>.progress{
  height:20px;
  background: linear-gradient(to right, yellow, #BD3D3D 300px);
  border-radius: 10px;
}

/* set some custom progresses */

.progressbar:nth-child(1)>.progress{
  width: 25%;
}
.progressbar:nth-child(2)>.progress{
  width: 50%;
}
.progressbar:nth-child(3)>.progress{
  width: 100%;
}

<div class="progressbar"><div class="progress"></div></div>
<div class="progressbar"><div class="progress"></div></div>
<div class="progressbar"><div class="progress"></div></div>