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

简介: 手写个进度条,说下自己遇到的问题,第一次的思路是只通过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 + '%';
        }
    }
},
具体效果可以直接复制代码到本地看,样式颜色可以微调成自己想要的哦💕💕~ 欢迎阅读点赞⭐️⭐️⭐️
目录
相关文章
|
JavaScript 前端开发 小程序
js 实现浏览器下载视频2种方法
js 实现浏览器下载视频2种方法
1613 0
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1580 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
JavaScript API 容器
Vue3加载条(LoadingBar)
这是一个基于 Vue 的加载条组件,提供了丰富的自定义选项和方法。通过简单的 API,可以控制加载条的开始、结束及错误状态。支持设置容器类名、样式、颜色等属性,并可通过 `start`、`finish` 和 `error` 方法来触发不同状态。
269 1
Vue3加载条(LoadingBar)
|
SQL Python
Pycharm优化
Pycharm优化
|
编解码 应用服务中间件 nginx
DemuxException: type = CodecUnsupported, info = Flv: Unsupported codec in video frame: 2
DemuxException: type = CodecUnsupported, info = Flv: Unsupported codec in video frame: 2
860 0
|
Java 数据库连接 数据格式
【Java笔记+踩坑】Spring基础2——IOC,DI注解开发、整合Mybatis,Junit
IOC/DI配置管理DruidDataSource和properties、核心容器的创建、获取bean的方式、spring注解开发、注解开发管理第三方bean、Spring整合Mybatis和Junit
【Java笔记+踩坑】Spring基础2——IOC,DI注解开发、整合Mybatis,Junit
nrm 安装后报错 Error [ERR_REQUIRE_ESM]: require() of ES Module
nrm 安装后报错 Error [ERR_REQUIRE_ESM]: require() of ES Module
1067 0
|
数据库连接 Python
Python进阶语法之异常处理
Python进阶语法之异常处理
|
JavaScript
Cesium第一次搭建环境出不来地球的问题
Cesium第一次搭建环境出不来地球的问题
256 0
|
前端开发 JavaScript
JS前端实现身份证号码合法性校验(校验码校验)
JS前端实现身份证号码合法性校验(校验码校验)
1066 0