The effect

How to achieve such a ring progress bar effect, can use canvas, SVG, GIF and so on, today we talk about how to use CSS3 to achieve.

Implementation approach

Circle is very simple, a line of Cssborder-radius :50% can be implemented, and there are no compatibility problems, what, you say IE, let it roll…

We need three rings here, one full, two and a half. This is a rough picture

Here, I used clip to cut the half circle. The main code is as follows:

.left{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 10px solid lightblue;
	position:absolute;
	top: -10px;   /* 10 because the border is 10 pixels */
	right: -10px;
	clip: rect(0 100px 200px 0);  /* The top is 0 and the right is 100px and the bottom is 200px and the left is 0 
}

Copy the code

The right side is similar but the clipping position has been changed

.right{ width: 200px; height: 200px; border-radius: 50%; border: 10px solid lightblue; position:absolute; top: -10px; /* 10 because the border is 10 pixels */ right: -10px; clip: rect(0 200px 200px 100px); /* * * * * * * * * * * * * * * * * * *Copy the code

The complete code

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            box-sizing: border-box;
        }
        .box{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: #ccc;
            border-radius: 50%;
            left: 40%;
            top: 200px;

        }
        .num{
            position: absolute;
            top: 50%;
            left: 50%;
            background: #fff;
            border-radius: 50%;
            width: 180px; 
            height: 180px;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 180px;
            font-size: 32px;
        }
        
        
        .clip{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid #ccc;
            border-radius: 50%;
            clip: rect(0, 200px, 200px, 100px);
        }
        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid lightblue;
            border-radius: 50%;
            clip: rect(0 100px 200px 0);
            top: -10px;
            left: -10px;
        }
        .right{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid lightblue;
            border-radius: 50%;
            clip: rect(0 200px 200px 100px);
            top: -10px;
            left: -10px;
        }
        .width-none{
            width: 0;
        }
        .auto{
            clip: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="clip">
            <div class="left"></div>
            <div class="right width-none"></div>
        </div>
        <div class="num">

        </div>
    </div>
    <script >
        let clip = document.querySelector('.clip'),
        left = document.querySelector('.left'),
        right = document.querySelector('.right'),
        num = document.querySelector('.num'),
        rotate = 0;
    
        let loop = setInterval(() => {
            if(rotate >= 100){
                rotate = 0;
                right.classList.add('width-none');
                clip.classList.remove('auto');
            } else if(rotate > 50){
                right.classList.remove('width-none');
                clip.classList.add('auto');
            }
            rotate++;
            left.style.transform = 'rotate('The rotate + + 3.6 *'deg)';
            num.innerHTML = `${rotate}%`
        },100)

    </script>
</body>
</html>

Copy the code

A quick word about the code above

1. Hide the right semicircle first, this is because we need to rotate the left semicircle, we can wait for the left semicircle to rotate to the position of the right semicircle before showing the right side, that is, when the rotation reaches 180 degrees.

2. Add clip: rect(0, 200px, 200px, 100px) to the main circle; Clipping style, this is because by default our progress is 0%, we only show the right side to hide the left side, but we don’t hide the right side? So what do you want to show it for? Because when you rotate to the left you see the circle going to the right. A little bit around, please combine the code, a lot of understanding

3. Once the left is rotated by 180, we need to show the right and set the clipping of the box element to the default value, that is, not clipping, so that the left and right circles can be shown completely.

4. Finally, we use JS to control the rotation Angle and display the percentage on the page

Write in the last

If the above explanation does not make sense, don’t read it at all, put the code in local debugging, to understand yourself.

Don’t get bogged down. Code is the best language.

It is very simple to use clip to achieve circular progress, and compatibility is not needed. For clip, please refer to zhang Xinxu’s log