[SOLVED] How to create a gradient progress bar with a fixed gradient

How to create a gradient progress bar with a fixed gradient

I'm rather new to HTML and CSS. I'd like to create a progress bar that has a gradient background which it masked to the whole element but only visible on the bar itself. So far I've only managed to get the result shown below 1. Ive tried to achieve the result shown in the second image by manipulating other background properties such as background-attachment, but then the gradient itself does not fit anymore. I've also tried to give the parent of the bar a gradient background and simply draw a white div above the remaining space but that solution prohibited me from adding a border radius to the bar itself. Any help is highly appreciated. Cheers!

What I'm trying to achieve

What I've got so far

.progress-bar-container {
  width: 500px;
  height: 50px;
  margin: 50px 0px;
  background: black;
}

.progress-bar-indicator {
  height: 100%;
  background-image: linear-gradient(to right, red, green, blue);
  border-radius: 25px;
}

#indicator-1 {
  width: 80%;
}

#indicator-2 {
  width: 50%;
}

#indicator-3 {
  width: 20%;
}

<div class="progress-bar-container">
  <div class="progress-bar-indicator" id="indicator-1"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" id="indicator-2"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" id="indicator-3"></div>
</div>

Solution

A solution using mask that will work with dynamic width:

.progress-bar-container {
  height: 50px;
  margin: 50px 0px;
  background: black;
  position:relative; /* relative here */
}

.progress-bar-indicator {
  height: 100%;
  border-radius: 25px;
   /* this will do the magic */
  -webkit-mask:linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0);
}
.progress-bar-indicator::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: linear-gradient(to right, red, green, blue); /* your gradient here */
}

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:80%"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:50%"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:30%"></div>
</div>