如何创建固定渐变的渐变进度条

Question

我对 HTML 和 CSS 相当陌生。我想创建一个具有渐变背景的进度条，它掩盖了整个元素，但仅在进度条本身上可见。到目前为止，我只得到了如下所示的结果1。我尝试通过操作其他背景属性（例如背景附件）来实现第二张图像中显示的结果，但渐变本身不再适合。我还尝试为栏的父级提供渐变背景，并简单地在剩余空间上方绘制一个白色 div，但该解决方案禁止我向栏本身添加边框半径。非常感谢任何帮助。干杯!

我想要实现的目标

到目前为止我所得到的

.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>

Answer 1

使用适用于动态宽度的掩码的解决方案：

.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>