css实现炫酷进度条

实现效果：

代码内容：

<div className={styles.progressBox}>
   <div className={styles.progress}></div>
   <div className={styles.progress_bar} style={{ width: "40%" }}></div>
</div>

 

代码样式实现：

.progressBox {
          flex: 1;
          padding-top: 0.3rem;
          padding-right: 0.2rem;
          position: relative;
          .progress {
            height: 0.3rem;
            overflow: hidden;
            background: -webkit-repeating-linear-gradient(
              0deg,
              #e9e9e9 0,
              #e9e9e9 4px,
              #ffffff 4px,
              #ffffff 8px
            );
          }
          .progress_bar {
            height: 0.3rem;
            background: -webkit-repeating-linear-gradient(
              0deg,
              #3071fd 0,
              #3071fd 4px,
              #ffffff 4px,
              #ffffff 8px
            );
            position: absolute;
            left: 0;
            top: 0.3rem;
          }
        }