The body of the

Yes, it is! There’s no foreword. Let’s go straight to the text.

Let’s draw a simple circle first

 .pie {
                width: 100px;
                height: 100px;
                margin: 50px auto;

                border-radius: 50%;
                background: yellowgreen;

               
            }
Copy the code

Next we set the half of it to a different color, the color we use when our percentages are displayed, adding this sentence to pie

  background-image: linear-gradient(to right, transparent 50%, # 653 0);

Copy the code

In general, if we want to implement a percentage display, we usually use another div to set the mask layer. But we don’t use it today, we’re going to use: : before,

.pie:before {
                content: ' ';
                display: block;
                margin-left: 50%;
                height: 100%;

                border-radius:  0 100% 100% 0 / 50%;

                background-color: inherit;

            }
Copy the code

A mask layer is then implemented

The black box part is the mask layer we implemented with pseudo elements. As to why it’s only half covered, look down.

Next, we try to rotate the semicircle to show the percentage effect

First we set the center of the rotation to the center of the circle, and then set the Angle of rotation

Add the following two lines to the previous code

.pie:before {... transform-origin: 0 50%; transform: rotate(.1turn); }Copy the code

Transform-origin sets the rotation center, and transform:rotate sets the rotation Angle

First of all, we set background:inherit for the pseudo-element to inherit the background color of the parent element. In order to continue the animation when the time is over 50%, we need to use the animation effect to rotate. We need to change the background color at this point. If we give 3s to rotate to 180 degrees, then the background will change color after 3s. So we can specify the following two animation functions

@keyframes spin { to { transform: rotate(.5turn); } } @keyframesbg {
                50% {
                    background: # 653;}}Copy the code

Spin controls rotation, BG controls color change. So now our code becomes

.pie:before {
                content: ' ';
                display: block;
                margin-left: 50%;
                height: 100%;

                border-radius:  0 100% 100% 0 / 50%;

                background-color: inherit;

                transform-origin: 0 50%;

                animation: spin 50s linear infinite,
                           bg 100s step-end infinite;
               
            }
Copy the code

The rest of it stays the same oh, remember. This gives us a complete percentage countdown animation.

Here’s an extension, one of the nice things about animation-delay, we can give it a negative value. There is one in animation-delay

A negative delay is legal, which means the animation will start playing immediately and advance to the absolute value of the delay. That is, the animation skips the specified time and starts playing in the middleCopy the code

So we can change our code as follows

.pie:before {
                content: ' ';
                display: block;
                margin-left: 50%;
                height: 100%;

                border-radius:  0 100% 100% 0 / 50%;

                background-color: inherit;

                transform-origin: 0 50%;

                animation: spin 50s linear infinite,
                           bg100s step-end infinite; animation-play-state: paused; Paused */ animation-delay: inherit; /* specify that the delay time of the animation is inherited from the parent element */}Copy the code

In this way we can add a delay to the div element pie to have the effect of displaying different percentages

 <div class="pie" style="animation-delay: -20s;"></div>

<div class="pie" style="animation-delay: -60s;"></div>
Copy the code

We only need to control how long to display, the rest of the color changes and a series of things can be done for us by CSS, is not very simple and convenient. (Of course, if you want to change the data, you need to interact with JS)