1. 程式人生 > 其它 >css實現炫酷進度條

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