渐变背景，带透明分隔，请问怎么实现图片效果？

Question

有大佬知道这种这么实现吗，一个百分比的进度条，颜色部分是渐变的，中间分隔的地方要是透明的，有人提供一下思路吗

Answer 1

https://codepen.io/FractalPen...

<div class="bar">
  <div class="pattern"></div>
</div>

.bar {
  padding:0.5em;
  width:19em;
  background-color:#000;
}
.bar .pattern {
  height:2em;
  background:linear-gradient(to right, #909 0%, #009 100%) #000;
  -webkit-mask-image:repeating-linear-gradient(to right, #000 0, #000 1em, transparent 1em, transparent 1.5em);
}

Answer 2

思路就是，一个渐变背景，然后通过设置一个条纹渐变来覆盖。
不过这样需要背景色是纯色的。
具体可以看这个demo

---

CSS代码也不多，我直接贴上来了。

div
  width 600px
  height 100px
  background linear-gradient(to right, transparent 50%, black 0),linear-gradient(to right, orange, red)
  background-size 30px 100%,100%
  margin 50px auto

body
  background black

Answer 3

除了CSS，另外想到用JS：上下两端的rgb数值和for循环配合