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;
          }
        }

标签：进度条,0deg,0.3,height,炫酷,rem,ffffff,css,4px
来源： https://www.cnblogs.com/qianzhengyan/p/16252285.html