Source: github.com/any86/5a.cs…

ios/android

There are two kinds of loading ICONS commonly used on the Web. One is “chrysanthemum” in ios and the other is “ring” in Android. Today we will use SVG to animate the android “ring “. Next we will implement the ios” chrysanthemum “.

Pay attention to
smooth

demo

xml(svg)

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

First we define the SVG canvas size to be 50×50, zoom in the browser to be 36×36 (this 36 can be adjusted according to actual needs), define the center coordinates of the ring to be 25,25, and the radius to be 20. Get the value of the parent element’s color property. The ring is 5 pixels wide. Let’s see what it looks like before we write the 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 endpoints are circles
            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; }}}}Copy the code

stroke-dasharray

First, explain stroke-dasharray, which is used to define dashed lines. For example, stroke-dasharray=”50, 20″ indicates a dotted line with a solid part of 50 and a gap of 20:

Unit solid line
stroke-dasharray
25, 200
50, 200
100, 200

Pay attention to
200

stroke-dashoffset

Offset, when the value is positive, the dashed line retracts counterclockwise and the negative line advances clockwise (stroke-Dashoffset :0 on the left, the ring starts at 3 points, and after -10 on the right, the ring starts clockwise):

The tail is shrinking
stroke-dashoffset

3 key moments of animation

* * * * 0% of the time

Make the circle show only one point, so that the animation is not jarring after one cycle (you can change it to 0 to compare the effect).

* * * * 50% of the time

To make the ring appear 80% circular, set the solid line part to 100(125*0.8, 125 is the perimeter): stroke-dasharray: 100, 200; , and the tail is shrinking, so set stroke-dashoffset to -45; .

* * * * 100% of the time

Return to a point, consistent with 0%, so the animation loops smoothly, but animation from 50% to 100% is just “tail shrinkage “, so we use stroke-Dashoffset :-124,125-124=1 is exactly one pixel, and the animation is done.

The overall rotation

To keep up with the android animation, rotate the whole thing as well. The code here is relatively simple and will not be repeated.

Animation property extension

If you look carefully at the CSS animation documentation, you will find that an animation can support multiple transitions at the same time. For example, animation: Color 6s ease-in-out Infinite, Dash 1.5s ease-in-out Infinite; Split multiple animations with a “,”.

So we can actually extend the above animation, such as rotation and color change:

    &-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.5 s 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; }}}Copy the code

This article code reference iView, a VUE framework.