How CSS implements the effect of pie-like loading wait graphs

This article mainly introduces the use of pure CSS to achieve pie-like loading wait graph effect, with a certain reference value, interested in small partners can refer to

Write in front

Before encountering a small exercise, is to use pure CSS3 to write pie-like loading effect, before really did not write this thing, Floret completely no clue, and then refer to the Zhang Xinxu Teacher's CSS3 to realize the egg pie pie chart loading wait to turn, there are some other things, The same effect is done in a way that looks a bit similar but does not seem to be the same, as the topic requires:

Begin

Pondering a bit, sleep up to draw a figure, straighten out a bit, but feel this picture is a little difficult to understand Ah ah ah ah, no matter, small flower in the following 1.1 points explained ~ (Red and pink for color, slash behind is the value of Z-index)

Principle

This thing is divided into two parts: the outer ring and the inner circle. The color of this thing is custom, but I draw the circle seems a bit too big, and then the animation time is casually set, anyway turned up to look at the feeling a bit strange

First on the HTML structure

<p class= "Con-wrap" >    <!--bezel    and <p class= "Out-round" ></p>    <!--inner circle with four semicircular >    <p class= "In-round" >        <p class= "Lt-round" ></p>        <p class= "Lt-mask" ></p >        <p class= "Rt-round" ></p>        <p class= "Rt-mask" ></p>    </p></p>

The outer ring and inner circle are coincident by the position positioning, in essence, the outer ring turns 2 laps, the inner circle of red and pink to turn 1 laps (the whole process including red from 1 to 0, pink from 1 to 0), so the animation time of the inner circle should be twice times the outer ring!!!

1. Outer ring

The outer ring is simple, set border-radius:50% to draw a circle, then set three border to red, the other is transparent, that is, draw three-fourths round border (i.e. outer circle).

. out-round {            width:100px;            height:100px;            border-radius:50%;            margin:150px Auto;            border:3px solid #FF298C;            border-left:3px solid transparent;            animation:outround 1s linear infinite running;        }

Next is the outer ring animation, the animation that is set for it is rotating a circle, infinite means infinite times

@keyframes Outround {            0% {                transform:rotate (120deg)            }            100% {                transform:rotate ( -240deg)            }        }

rotate(120deg)the starting position of rotation can be adjusted according to the actual situation.

The outer ring is finished, the more troublesome is the following inner circle, but according to the diagram should be conceivable.

2. Inner Circle

There are four semi-circles, two on the left, two on the right (round is red, mask is pink), and the animation z-index controls the priority of each semicircle display by changing the value of two red semicircle. The CSS implementation section of the Inner circle is:

/* Left two semicircle */        . Lt-round,. lt-mask {            position:absolute;            width:35px;            height:70px;            border-radius:35px 0 0 35px;            Transform-origin:right Center;        } /* Two semicircular */        . Rt-round,. rt-mask {            position:absolute;            left:50%;            width:35px;            height:70px;            border-radius:0 35px 35px 0;        }

The following procedure describes the entire animation of the inner circle (where the pink on the right does not need to move, the red part of the right only needs to change z-index the value to change the priority of the display, to achieve the display and hidden effects to complement the left half of the circle. ）：

1. Initial setting:

Red left Z-index:3 powder 1  z-index:2 Red Right z-index:1 powder 2  z-index:0

Model Diagram:

Visual (ignoring the middle white line):

2. The left red rotates 180 degrees (counterclockwise so it is 360→180→0)

Model Diagram:

Visual:

3. The left red turns to 0 degrees (the red semicircle is covered by pink at the right and left sides)

Model Diagram:

Visual:

4. The pink semicircle repeats the previous red semicircle animation (i.e. the left pink 360→180→0)

Model Diagram:

Visual:

5. When the left pink rotates to 0 degrees, the whole semicircle returns to its initial state, and the entire animation is completed (the outer ring is animated 2 times at the same time).

Model Diagram:

Visual:

Animation Code Section

1, the first half of the red rotation for the left side of the week, the second half of a pink rotation for a week. The animation is implemented as follows:

/* Left red finish rotation of the first lap */@keyframes Ltround {0% {transform:rotate (360deg);            } 24.9% {z-index:3;                } 25% {z-index:1;            Transform:rotate (180DEG);            } 50% {transform:rotate (0deg);            } 74.9% {z-index:1;            } 75%, 100% {z-index:3; The red circle on the right side of the}/* is controlled by z-index to display and hide, thus achieving the effect of matching the left semicircle at the appropriate time */@keyframes rtround {0, 24.9% {z-index:            1;            } 25% {z-index:-3;            } 74.9% {z-index:-3;            } 75%, 100% {z-index:1;            }/* to the left pink to complete the rotation of the second lap */@keyframes ltmask {0, 25%, 50% {transform:rotate (360deg);            } 75% {transform:rotate (180deg);           } 100% {     Transform:rotate (0DEG); }        }

2. When all the code is not complete, you can set the animation time a little larger, so easy to observe, and then set back on the OK.

3. Because the animation is a constant change, but the value of Z-index can not change at a constant speed, so only in a very short period of time to change the value of Z-index. So that the effect can be achieved (suddenly it feels like the implementation is not very good)

Summary

No compatibility, no exception in Chrome, I don't know anything else.