jQuery/js 实现环形进度条

效果图

在这里插入图片描述

整体思路是:通过裁切(clip)产生两个半圆展示出静态的进度条,而后通过旋转(rotate)角度的变化产生动态效果
clip:只能在元素设置了“position:absolute”或者“position:fixed”属性时起作用 ;


结构

<div id="circle_1" class="circle">
    <div class="pie_left">
        <div class="left"></div>
    </div>
    <div class="pie_right">
        <div class="right"></div>
    </div>
    <div class="mask">
        <span style="margin: 0.2rem;color: #fc8238;">还需浏览39999个小时</span>
    </div>
</div>

样式

.circle { /*//这个元素可以提供进度条 */
    width: 130px;
    height: 130px;
    position: relative;
    border-radius: 50%;
}
#circle_1{
    background: #f2b237; /* //注意这是表示当前进度的颜色*/
} 
/*//这俩元素主要是为了分别生成两个半圆的,所以起作用的地方在于clip裁掉另一半 */

.pie_left,
.pie_right {
    width: 130px;
    height: 130px;
    position: absolute;
    top: 0;
    left: 0;
}
.left,
.right {
    width: 130px;
    height: 130px;
    background: #e4e3e2;  /*//注意这个是未完成进度的颜色 */
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
/* //裁掉左边一半*/

.pie_right,
.right {
    clip: rect(0, auto, auto, 65px);
}
 /* 裁掉右边一半  */
.pie_left,
.left {
    clip: rect(0, 65px, auto, 0);
}
/* mask起一个遮罩作用  ,,让进度展示像个圆环  */
.mask {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    left: 10px;
    top: 10px;
    background: #FFF;
    position: absolute;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: bold;
}

js

// 进度数值每增加1,角度增加3.6度,还要注意的是,当进度小于50%时,左侧进度条没有变化,当大于50%,左侧进度条才开始改变。
$('#circle_1').each(function(index, el) {
    var num = 86 * 3.6;  // 86 就是已经看过的进度。。总进度100
    if (num <= 180) {
        $(this).find('.right').css('transform', "rotate(" + num + "deg)");
    } else {
        $(this).find('.right').css('transform', "rotate(180deg)");
        $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
    };
});

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值