How to achieve the circular progress bar effect? Code example to implement circular progress bar effect using css3

In the previous article, we introduced how to use css3 to achieve the bar progress bar effect (complete code attached) . After understanding the practicality of the progress bar, today I will introduce to you another form. Progress bar: circular progress bar.

This kind of progress bar is suitable for pages when the page is loading and ring timers. The content of this article is about how to use css3 to achieve the circular progress bar effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to use css3 to realize the principle of the ring progress bar effect

1. First we need to draw the circular progress bar, But the div formats are all square, so border-radius needs to be used to convert the square into a circle.
   

2. #The circular progress bar is always rotating. We can use the rotation (deg) statement in CSS3 to achieve this effect.

## 3. Here we sort out the usage of rotation (deg) in detail (deg) //Rotate around the x-axis                             2.rotateY(deg) //Rotate around the Y-axis

                                                                                                                                                                                      #                                                                                                                                                                                                 # Centering can be achieved using translate(-50%,50%).

Translatex (a) // Transfer A's pixel distance in the x direction.

Translatey (a) // Transfer A's pixel distance in the Y direction.

                                                                                                                                                                                                                                                                  translateZ(a)//Translate the pixel distance of a in the Z direction.

How to use css3 to achieve the bar ring progress bar effect steps (code)

Step 1: HTML part

<div class="progress_wrap js_halfClassNameObj">
    <div class="right under">
        <div class="circleProgress rightcircle"></div>
    </div>
    <div class="left under">
        <div class="circleProgress leftcircle"></div>
    </div>
    <div class="right up">
        <div class="circleProgress rightcircle js_progressRight" 
        style="-webkit-transform:rotate(&#39;+circleData.rightRotate.toString()+&#39;deg)"></div>
    </div>
    <div class="left up">
        <div class="circleProgress leftcircle js_progressLeft"
         style="-webkit-transform:rotate(&#39;+circleData.leftRotate.toString()+&#39;deg)"></div>
    </div>
    //percent小于50时需要使用遮罩进行遮挡超出环形范围部分
    <div class="left up_left_cover js_giftLeftCover" style="display:&#39;+circleData.leftCircleDisplay+&#39;">
        <div class="circleProgress leftcircle color_border_t_l04"></div>
    </div>
    <div class="num">
        <div>剩余</div>
        <div class="js_giftPercent">&#39;+circleData.percent+&#39;%</div>
    </div>
</div>

Step 2: css part

.progress_wrap{
                   position: relative;
                   margin:0 0 0 .14rem;
                   width:.92rem;height:.92rem;
                   //little和more用来展示黄色和绿色的效果
                   &.little{
                       .under{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_under_little;
                           }
                           .rightcircle{
                               border-right:$progress_border_under_little;
                           }
                           .leftcircle{
                               border-left:$progress_border_under_little;
                           }
                       }
                       .up{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_up_little;
                           }
                           .rightcircle{
                               border-right:$progress_border_up_little;
                           }
                           .leftcircle{
                               border-left:$progress_border_up_little;
                           }
                       }
                       //用遮挡实现左侧剩余百分比，遮住超出环形范围部分；核心是使用同心圆进行边框进行遮挡
                       .up_left_cover{
                           width:.47rem;height:.92rem;
                           .leftcircle{
                               top:-.02rem;
                               width:.74rem;height:.74rem;
                               border:.11rem solid transparent;
                               border-top:$progress_border_up_left_cover_little;
                               border-left:$progress_border_up_left_cover_little;
                               //实际值为195deg,被遮挡环颜色值深有光晕,需要将角度进行微调（-191deg）
                               进行完全遮挡
                               -webkit-transform:rotate(-191deg);
                           }
                       }
                   }
                   &.more{
                       .under{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_under;
                           }
                           .rightcircle{
                               border-right:$progress_border_under;
                           }
                           .leftcircle{
                               border-left:$progress_border_under;
                           }
                       }
                       .up{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_up;
                           }
                           .rightcircle{
                               border-right:$progress_border_up;
                           }
                           .leftcircle{
                               border-left:$progress_border_up;
                           }
                       }
                   }
                   .right,.left{
                       position: absolute;top:0;overflow:hidden;
                       width:.46rem;height:.92rem;
                       .circleProgress{
                           position: absolute; top:0;
                           width: .78rem; height: .78rem;
                           border:.07rem solid transparent; border-radius: 50%;
                       }
                       .rightcircle{
                           right:0;
                           -webkit-transform: rotate(15deg);
                       }
                       .leftcircle{
                           left:0;
                           -webkit-transform: rotate(-15deg);
                       }
                   }
                   .right{
                       right:0;
                   }
                   .left{
                       left:0;
                   }
                   .num{
                       position: absolute;left:50%;top:50%;
                       width:.5rem;
                       transform:translate(-50%,-50%);
                       font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem;
                   }
               }

Step 3: js part

function giftCircleProgressFn(per){
            var circleData = {};
            var percent = parseInt(per);
            //领取进度环形颜色className
            var halfClassName = percent<50?"little":"more";
            //左半环遮罩层显示样式状态
            var leftCircleDisplay = percent<50?"block":"none";
            var leftRotate = 0;
            var rightRotate = 0;
            //以50%为界限;<50%:右半圆占比为0,左半圆需要使用遮罩进行遮挡,展示剩余部分
            //           >50%:左半圆占比100%,右半圆直接使用百分比计算所占部分即可
            //注意：在半圆中计算百分比时,要将百分比乘以2。
            if(percent<50){
                leftRotate = -15-180+150*(percent*2)/100;   
                rightRotate = -135;
            }else{
                leftRotate = -15;
                rightRotate = -135+(150*((percent-50)*2)/100);   //比例在半环计算需要*2倍
            }
            circleData = {
                leftRotate:leftRotate,  //左半环进度
                rightRotate:rightRotate, //右半环进度
                halfClassName:halfClassName, //50% 进度环 变色
                leftCircleDisplay:leftCircleDisplay, //左半环遮罩
                percent:per  //进度百分比
            }
            return circleData
        }

The effect is shown in the figure

##

The above is the detailed content of How to achieve the circular progress bar effect? Code example to implement circular progress bar effect using css3. For more information, please follow other related articles on the PHP Chinese website!