【横柱带斜三角】进度条实现

学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕 ~~，谢谢大家⭐️⭐️⭐️~

手写个进度条，说下自己遇到的问题，第一次的思路是只通过before和after样式写出来，实现进度条，但是发现有个bug就是当达到90多以上，after右上三角颜色就不对了，颜色有出入，无法实现，接下来就想到了第二种方案，在mybar里边分别放两个div 一个渐变的横柱和一个小三角这样，然后依旧通过mybar去控制进度就这样完美解决，具体思路看代码就了解了，看代码吧

效果图如下：

代码介绍：

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部分

width设置默认初始值为0；curN是当前值要显示的百分比数值；total是总数

// 进度条
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 + '%';
        }
    }
},

具体效果可以直接复制代码到本地看，样式颜色可以微调成自己想要的哦💕💕~ 欢迎阅读点赞⭐️⭐️⭐️