利用 element ui 进度条实现渐变 条纹进度条

首先 我们看下需要完成的效果

首先可以看到是一个有白色条纹，以及一个渐变色的条纹的进度条
第一部分呢 我们可以先写出这个白色的条纹
我们可以利用以下代码实现白色条纹

 .el-progress-bar__inner{
 background-color: transparent !important;
 background-image: linear-gradient(-135deg,
              transparent 0%,transparent 25%,
              rgba(255, 255, 255, 0.5) 25%,rgba(255, 255, 255, 0.5) 50%,
              transparent 50%, transparent 75%,
              rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0.5) 100%);
background-size: 28px 28px;}

那么这样就可以实现 只有白色条纹的进度条，
那么他的渐变色是怎么实现的呢，我们可以看下 element ui 的进度条是怎么封装的 有一个内部的div .el-progress-bar__inner 和一个外部的 .el-progress-bar__outer
那么我们白色条纹写在 .el-progress-bar__inner 上，由于 渐变色条纹实现不了，所以我们采用 透明色和白色的条纹，再在 .el-progress-bar__outer给上一个 背景渐变色

.el-progress-bar__outer{
  width: 237px;
  height: 13px;
  background-image: linear-gradient(to right, #5E71FF, #1CB0FF);;
  z-index: 999;
}

这样 中间透明的条纹就会显示背景上的颜色渐变这样就能实现一个 渐变颜色的条纹进度条