css實現炫酷進度條
阿新 • • 發佈:2022-05-10
實現效果:
程式碼內容:
<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; } }