当前位置：Gxlcms > css > 环形进度条效果怎么实现？用css3实现环形进度条效果代码示例

环形进度条效果怎么实现？用css3实现环形进度条效果代码示例

时间：2021-07-01 10:21:17 帮助过：88人阅读

上一篇文章我们介绍了如何使用css3实现条形进度条效果（附完整代码），了解到进度条的实用性，那么今天来向大家介绍一下另外一种形式的进度条：环形进度条。

这种进度条适合应用于页面加载的时候和环形计时器的页面。本篇文章给大家带来的内容是关于如何使用css3实现环形进度条效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

如何使用css3实现条环进度条效果原理

  1. 首先我们需要画出圆形进度条，但是div格式都是方形的，这就需要用到border-radius将方形转换成圆形。

  2. 圆形的进度条一直处于旋转的状态，我们可以引用css3里面的rotage（deg）语句实现这一效果。

3.这里我们详细梳理一下rotage（deg）的用法

a.旋转：1.rotateX(deg) //绕x轴旋转

2.rotateY(deg) //绕Y轴旋转

3. rotateZ(deg) //绕Z轴旋转

b.平移：translate(a,b) //在x，y方向平移a,b像素距离。利用translate(-50%,50%)可以实现居中。

translateX(a) //在X方向平移a的像素距离。

translateY(a)//在Y方向平移a的像素距离。

translateZ(a)//在Z方向平移a的像素距离。

如何使用css3实现条环进度条效果步骤（代码）

步骤一：HTML部分

  1. <div class="progress_wrap js_halfClassNameObj">
  2.     <div class="right under">
  3.         <div class="circleProgress rightcircle"></div>
  4.     </div>
  5.     <div class="left under">
  6.         <div class="circleProgress leftcircle"></div>
  7.     </div>
  8.     <div class="right up">
  9.         <div class="circleProgress rightcircle js_progressRight" 
  10.         style="-webkit-transform:rotate('+circleData.rightRotate.toString()+'deg)"></div>
  11.     </div>
  12.     <div class="left up">
  13.         <div class="circleProgress leftcircle js_progressLeft"
  14.          style="-webkit-transform:rotate('+circleData.leftRotate.toString()+'deg)"></div>
  15.     </div>
  16.     //percent小于50时需要使用遮罩进行遮挡超出环形范围部分
  17.     <div class="left up_left_cover js_giftLeftCover" style="display:'+circleData.leftCircleDisplay+'">
  18.         <div class="circleProgress leftcircle color_border_t_l04"></div>
  19.     </div>
  20.     <div class="num">
  21.         <div>剩余</div>
  22.         <div class="js_giftPercent">'+circleData.percent+'%</div>
  23.     </div>
  24. </div>

步骤二：css部分

  1. .progress_wrap{
  2.                    position: relative;
  3.                    margin:0 0 0 .14rem;
  4.                    width:.92rem;height:.92rem;
  5.                    //little和more用来展示黄色和绿色的效果
  6.                    &.little{
  7.                        .under{
  8.                            .rightcircle,.leftcircle{
  9.                                border-top:$progress_border_under_little;
  10.                            }
  11.                            .rightcircle{
  12.                                border-right:$progress_border_under_little;
  13.                            }
  14.                            .leftcircle{
  15.                                border-left:$progress_border_under_little;
  16.                            }
  17.                        }
  18.                        .up{
  19.                            .rightcircle,.leftcircle{
  20.                                border-top:$progress_border_up_little;
  21.                            }
  22.                            .rightcircle{
  23.                                border-right:$progress_border_up_little;
  24.                            }
  25.                            .leftcircle{
  26.                                border-left:$progress_border_up_little;
  27.                            }
  28.                        }
  29.                        //用遮挡实现左侧剩余百分比，遮住超出环形范围部分；核心是使用同心圆进行边框进行遮挡
  30.                        .up_left_cover{
  31.                            width:.47rem;height:.92rem;
  32.                            .leftcircle{
  33.                                top:-.02rem;
  34.                                width:.74rem;height:.74rem;
  35.                                border:.11rem solid transparent;
  36.                                border-top:$progress_border_up_left_cover_little;
  37.                                border-left:$progress_border_up_left_cover_little;
  38.                                //实际值为195deg,被遮挡环颜色值深有光晕,需要将角度进行微调（-191deg）
  39.                                进行完全遮挡
  40.                                -webkit-transform:rotate(-191deg);
  41.                            }
  42.                        }
  43.                    }
  44.                    &.more{
  45.                        .under{
  46.                            .rightcircle,.leftcircle{
  47.                                border-top:$progress_border_under;
  48.                            }
  49.                            .rightcircle{
  50.                                border-right:$progress_border_under;
  51.                            }
  52.                            .leftcircle{
  53.                                border-left:$progress_border_under;
  54.                            }
  55.                        }
  56.                        .up{
  57.                            .rightcircle,.leftcircle{
  58.                                border-top:$progress_border_up;
  59.                            }
  60.                            .rightcircle{
  61.                                border-right:$progress_border_up;
  62.                            }
  63.                            .leftcircle{
  64.                                border-left:$progress_border_up;
  65.                            }
  66.                        }
  67.                    }
  68.                    .right,.left{
  69.                        position: absolute;top:0;overflow:hidden;
  70.                        width:.46rem;height:.92rem;
  71.                        .circleProgress{
  72.                            position: absolute; top:0;
  73.                            width: .78rem; height: .78rem;
  74.                            border:.07rem solid transparent; border-radius: 50%;
  75.                        }
  76.                        .rightcircle{
  77.                            right:0;
  78.                            -webkit-transform: rotate(15deg);
  79.                        }
  80.                        .leftcircle{
  81.                            left:0;
  82.                            -webkit-transform: rotate(-15deg);
  83.                        }
  84.                    }
  85.                    .right{
  86.                        right:0;
  87.                    }
  88.                    .left{
  89.                        left:0;
  90.                    }
  91.                    .num{
  92.                        position: absolute;left:50%;top:50%;
  93.                        width:.5rem;
  94.                        transform:translate(-50%,-50%);
  95.                        font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem;
  96.                    }
  97.                }

步骤三：js部分

  1. function giftCircleProgressFn(per){
  2.             var circleData = {};
  3.             var percent = parseInt(per);
  4.             //领取进度环形颜色className
  5.             var halfClassName = percent<50?"little":"more";
  6.             //左半环遮罩层显示样式状态
  7.             var leftCircleDisplay = percent<50?"block":"none";
  8.             var leftRotate = 0;
  9.             var rightRotate = 0;
  10.             //以50%为界限;<50%:右半圆占比为0,左半圆需要使用遮罩进行遮挡,展示剩余部分
  11.             //           >50%:左半圆占比100%,右半圆直接使用百分比计算所占部分即可
  12.             //注意：在半圆中计算百分比时,要将百分比乘以2。
  13.             if(percent<50){
  14.                 leftRotate = -15-180+150*(percent*2)/100;   
  15.                 rightRotate = -135;
  16.             }else{
  17.                 leftRotate = -15;
  18.                 rightRotate = -135+(150*((percent-50)*2)/100);   //比例在半环计算需要*2倍
  19.             }
  20.             circleData = {
  21.                 leftRotate:leftRotate,  //左半环进度
  22.                 rightRotate:rightRotate, //右半环进度
  23.                 halfClassName:halfClassName, //50% 进度环 变色
  24.                 leftCircleDisplay:leftCircleDisplay, //左半环遮罩
  25.                 percent:per  //进度百分比
  26.             }
  27.             return circleData
  28.         }

实现效果如图所示

20170812145357174.gif

以上就是环形进度条效果怎么实现？用css3实现环形进度条效果代码示例的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！