Using CSS to implement loading animation of Android system

There are two common loading icons on the web, one is the "chrysanthemum" of iOS, and the other is the "ring" of Android. Today we use SVG to implement the "ring" animation of Android, and the "chrysanthemum" of iOS in the next class.

Note : Because the gif has a small number of frames, the actual animation effect is very smooth

of.

xml(svg)

<svg width="36" height="36" viewBox="0 0 50 50" class="a-loading-android">
    <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle>
</svg>

First, we define the SVG canvas size as 50x50 , and zoom it to 36x36 in the browser (you can adjust this 36 according to your actual needs), define the center coordinates of the ring as 25,25 , the radius as 20 ( the circumference is about 125 , which will be used later), the color is currentColor to get the value of the color attribute of the parent element, and the width of the ring is 5 pixels. Let's take a look at the effect before writing CSS:

scss

.a-loading {
    &-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            animation: dash 1500ms ease-in-out infinite;
            stroke-linecap: round; // The endpoint is a circle color: currentColor;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }

            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }

            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }
    }
}

stroke-dasharray

Let's first explain stroke-dasharray , which is used to define dashed lines. For example, stroke-dasharray="50, 20" means a dashed line with a solid line of 50 and a gap of 20:

Imagine if the ring is also represented by a dotted line, and the length of the unit solid line part varies within the circumference of the ring, wouldn't this be achieved (half ring/full ring, etc.)? The following are the values ​​of stroke-dasharray : 25, 200 / 50, 200 / 100, 200

:

Note : 200 here

is arbitrarily defined, representing the gap between dashed lines, as long as the value is larger than the circumference of the ring.

stroke-dashoffset

Offset, when the value is positive, the dashed line moves back counterclockwise, and when the value is negative, it moves forward clockwise (stroke-dashoffset:0 in the left picture, the starting point of the ring is at 3 o'clock, and after setting it to -10 in the right picture, the starting point of the ring is offset clockwise for a distance):

Because in the animation, the ring increases in length while the tail shrinks in length , so it is necessary to cooperate with stroke-dashoffset

accomplish.

3 key moments in animation

0% Moment

Let the ring show only one point, so that the animation will not be abrupt after one cycle (you can change it to 0 to compare the effect).

50% Moment

In order to make the ring present 80% of the ring, the length of the solid line is set to 100 (125*0.8, 125 is the circumference): stroke-dasharray: 100, 200; , and the tail is shrinking, so set stroke-dashoffset: -45; .

100% Moments

Returning to a point state, the same as the 0% state, so that the animation cycle is not abrupt, but the animation from 50% to 100% is just "tail contraction", so we use stroke-dashoffset:-124 to achieve it, 125-124=1 is exactly one pixel, well, the animation is now complete.

Overall rotation

In order to be consistent with the animation of the Android system, the whole body is also rotated. The code here is relatively simple and will not be repeated.

Extensions to the animation property

If you read the CSS animation documentation carefully, you will find that animation can support multiple transition animations at the same time, such as animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; , and use "," to split multiple animations.

So we can actually extend the above animation, such as rotating and changing color at the same time :

&-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            // Add color change code animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; 
            stroke-linecap: round;
            color: currentColor;
        }
        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }
            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }
            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }
        @keyframes color {
            0%,
            100% {
                stroke: #6b5c5b;
            }
            40% {
                stroke: #0057e7;
            }
            66% {
                stroke: #008744;
            }
            80%,
            90% {
                stroke: #ffa700;
            }
        }
    }

The code in this article refers to iview , a vue framework.

Summarize

The above is what I introduced to you about using CSS to implement the loading animation of the Android system. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!