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

简介: 手写个进度条,说下自己遇到的问题,第一次的思路是只通过before和after样式写出来,实现进度条,但是发现有个bug就是当达到90多以上,after右上三角颜色就不对了,颜色有出入,无法实现,接下来就想到了第二种方案,在mybar里边分别放两个div 一个渐变的横柱和一个小三角这样,然后依旧通过mybar去控制进度就这样完美解决,具体思路看代码就了解了,看代码吧
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步💪~\
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

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

效果图如下:

image.png

image.png

image.png

代码介绍:

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 + '%';
        }
    }
},
具体效果可以直接复制代码到本地看,样式颜色可以微调成自己想要的哦💕💕~ 欢迎阅读点赞⭐️⭐️⭐️
目录
相关文章
|
7月前
|
API C++ 计算机视觉
【opencv3】鼠标框选矩形并显示当前像素点坐标和矩形中心点坐标C++
【opencv3】鼠标框选矩形并显示当前像素点坐标和矩形中心点坐标C++
|
2月前
ThreeJs通过射线获取自己的点击位置坐标
这篇文章详细说明了如何使用Three.js来绘制线条,包括创建线几何体、设置材质以及将线条添加到3D场景中的具体步骤。
115 1
ThreeJs通过射线获取自己的点击位置坐标
|
4月前
|
前端开发 JavaScript
会旋转的圣诞树
这篇文章介绍了如何使用HTML、CSS和JavaScript实现一个动态旋转的圣诞树效果,包括详细的实现步骤和编码实现,以及最终效果的展示。
会旋转的圣诞树
圆角三角形,二次方贝塞尔曲线
圆角三角形,二次方贝塞尔曲线
|
5月前
|
前端开发
canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形
canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形
50 0
求小球下落弹起的高度与路程
求小球下落弹起的高度与路程
120 0
|
前端开发 JavaScript
使用html+css+JavaScript制作抛物线小球
使用html+css+JavaScript制作抛物线小球
159 0
138.正方形螺旋拼块图案
138.正方形螺旋拼块图案
80 0
140.递归法绘制三角形图案
140.递归法绘制三角形图案
87 0