手写【横柱带斜三角】进度条实现
本文首发地址:https://juejin.cn/post/7081465823574884382
效果图如下:
Html部分
<div class="ProgressBox" style="width: 500px;"> <!-- 外层的渐变框--> <div style="background: linear-gradient(to right,#022F6D,#214879);padding: 10px 30px 10px 0 !important;"> <!-- 横柱斜三角底框--> <div id="myProgress" class="myProgress"> <!-- 横柱斜三角整体--> <div id="myBar" class="myBar"> <!-- 渐变横柱 --> <div class="myBara1"></div> <!-- 渐变横柱右侧小三角 --> <div class="myBara2"></div> </div> <span id="baifen" class="baifen">0%</span> </div> </div> </div>
Css部分
/* 进度条 */ .myProgress { position: relative; width: 100%; height: 16px; text-align: center; line-height: 100px; background: #052D55; padding-right: 3% !important; } .myProgress:before { display: block; content: ''; position: absolute; width: 0; height: 0; border-left: 16px solid #052D55; border-top: 16px solid rgb(33, 72, 121); right: 0; top: 0; background: transparent; } .myProgress:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 16px solid transparent; border-top: 16px solid transparent; right: 0; top: 0; background: transparent; } .myBar { position: relative; width: 100%; height: 16px; text-align: center; line-height: 100px; background: linear-gradient(to right, rgba(114, 138, 255, 1), rgba(26, 186, 255, 1)); } /*.myBar:before { display: block; content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-left: 16px solid transparent; border-top: 16px solid #052D55; background: transparent; } .myBar:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 16px solid transparent; border-top: 16px solid transparent; right: 0; top: 0; background: transparent; }*/ .baifen { position: absolute; top: -42px; right: -88px; font-size: 30px; font-family: DS-Digital; font-weight: bold; background: linear-gradient(0deg, #00D8BF 0%, #009CD6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .myBara1 { display: inline-block; width: 100%; height: 16px; background-color: pink; position: absolute; left: 0; background: linear-gradient(to right, rgba(114, 138, 255, 1), rgba(26, 186, 255, 1)); } .myBara2 { top: 0; right: 0; width: 0; height: 0; display: inline-block; border-bottom: 16px solid #1ABAFF; border-right: 16px solid transparent; position: absolute; right: -16px; }
Js部分
// 进度条 move() { var elem = document.getElementById("myBar"); var baifen = document.getElementById("baifen"); var width = 0;//初始值默认0 var curN = 80;//当前值 var total = 100; //总数 var id = setInterval(frame, 10); function frame() { elem.style.width = width + '%'; width++; if (width >= curN) { clearInterval(id); } else { width++; elem.style.width = ((width / total) * 100) + '%'; baifen.innerHTML = width * 1 + '%'; } } //改进一版 function frame() { elem.style.width = width + '%'; baifen.innerHTML = width * 1 + '%'; width++; if (curN == width) { elem.style.width = width + '%'; baifen.innerHTML = width * 1 + '%'; } else if (width > curN) { clearInterval(id); } else { width++; elem.style.width = ((width / total) * 100) + '%'; baifen.innerHTML = width * 1 + '%'; } } },
具体效果可以直接复制代码到本地看,样式颜色可以微调成自己想要的💕💕~ 欢迎阅读点赞⭐️⭐️⭐️