CSS3 Draw circular loading circles animation

This time to bring you CSS3 draw round loading circle animation, CSS3 Draw circular loading Circle animation Note what, the following is the actual case, together to see.

How to draw a round circle of loading

The applet needs a loading like the one below, native no, the introduction of other component libraries is too big, all decided to write for themselves.

1. Fundamentals

The dynamic implementation principle is to set the opacity of the 8 small circles from the large to small animation, each circle set different animation start time. The implementation of the layout is that the parent element is set to position:relative, and each circle is styled as Position:absolute; Left:xx; Top:xx; Right:xx; Bottom:xx. Distribute it evenly across a circle by setting different values for the Left/right/top/bottom. The HTML code is as follows:

<view class= "Q-loading-dot-warp" >                  <view class= "dot dot1" ></view>                <view class= "Dot Dot2 "></view>                <view class=" dot dot3 "></view>                <view class=" dot dot4 "></view>                <view class= "dot dot5" ></view>                <view class= "dot dot6" ></view>                <view class= " Dot dot7 "></view>                <view class=" dot dot8 "></view></view>

Simple to say, but to give them the value of the time when there is no experience, the first time with the science of the thought of simple to calculate the circle of three equal coordinates, often 8 circles into a diamond/square ... Just like this.

2. Position setting skills

Later see classmate PO article CSS3 Achieve 10 loading effect, according to JRD3 code really can achieve very good-looking effect, but when I want to change the size of loading circle, the style will be collapsed, after analysis, their coordinates are there is a mathematical relationship, as shown, The coordinates on the vertical or horizontal line can be positioned by 50%, as shown in the coordinates on the slash, where W is the width of the rectangle or the radius of the large garden that is surrounded by a 8 small circle.

The formula is deduced as follows:

The specific CSS code is as follows:

$width: 64px; $height: 64px; $dotWidth: 10px; $dotHeight: 10px; $radius: 5px; $offset: 9.37px; @function getLeft ($x) {@retur N ($width/4) * $x;} @function GetTop ($y) {@return ($height/4) * $Y;}    @keyframes changeopacity {from {opacity:1;} to {opacity:. 2;}}.    q-loading {position:fixed;    top:0;    left:0;    right:0;    bottom:0;        . q-loading-overlay {position:fixed;        top:0;        left:0;        right:0;        bottom:0;      Background-color:rgba (255, 255, 255,. 5);        }. q-loading-content {position:absolute;        left:50%;        top:50%;        Transform:translate (-50%,-50%);        Width: $width;        Height: $height;    Z-index:2;        }. dot {width:10px;        height:10px;        Position:absolute;        Background-color: #0033cc;        border-radius:50% 50%;        Opacity:1;    Animation:changeopacity 1.04s ease Infinite;        }. dot1 {left:0;        top:50%; Margin-top:-$Radius    animation-delay:0.13s;        }. Dot2 {left: $offset;        Top: $offset;    animation-delay:0.26s;        }. dot3 {left:50%;        top:0;        Margin-left:-$radius;    animation-delay:0.39s;        }. Dot4 {top: $offset;        Right: $offset;    animation-delay:0.52s;        }. dot5 {right:0;        top:50%;        Margin-top:-$radius;    animation-delay:0.65s;        }. dot6 {right: $offset;        Bottom: $offset;    animation-delay:0.78s;        }. dot7 {bottom:0;        left:50%;        Margin-left:-$radius;    Animation-delay:0.91s;        }. dot8 {bottom: $offset;        Left: $offset;    animation-delay:1.04s; }}

The code uses SCSS to define the radius of the great circle and small circle, no matter how big the variable is, the following style does not have to change.

This formula looks like a circle.

3. Animation Time Settings

Assuming that the animation duration is T, the number of circles is C, the position of a small circle is I (for example, above I take 1~8), then the small ring successively start the time is I * t/c

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

A detailed description of CSS positioning properties

CSS3 How to make a thin line less than one pixel