See the light: Analyze one kind of loading, learn a kind of loading

This is the 16th day of my participation in Gwen Challenge

background

The company’s business needs to change a loading animation, and then cut a picture. The requirement is to change the theme color of the company.

The company only put one image, and here’s the last GIF.

As mentioned above, it is a very simple animation.

Animation analysis and ideas

The visual effect is that it looks like it’s going around in circles, but that’s all visual deception, trust me.

When you cover up the other seven circles, you will see what it really is.

Above is the animation after I manually deleted 7 of the dots and the remaining one. You can see that there is no movement, just a dot that is zooming and changing opacity in place.

Then we only need to pay attention to adjust the position and initial properties of a single circle in the implementation, and then we can complete the effect.

Code implementation

For ease of understanding, only the main code is written here, and some of the less important code is omitted.

<! -- HTML section -->

<div class="loading">
    <! Quick generation with emmet syntax
    div.load-item.delay${$i}*8
    
    <div class="load-item delay1"></div>.<div class="load-item delay18"></div>
</div>
Copy the code

.loading{
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    margin: auto;
    width: 1px;
    height: 1px;
    
    .load-item{
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #fff;
        opacity:.3;
        border-radius: 100%;
        animation: loading 1.2 s linear infinite;
    }
    .load-item:nth-child(1) {left: 0; top: -28px; }
    .load-item:nth-child(2) {left: 22px; top: -22px; }
    .load-item:nth-child(3) {left: 28px; top: 0; }
    .load-item:nth-child(4) {left: 22px; top: 22px; }
    .load-item:nth-child(5) {left: 0; top: 28px; }
    .load-item:nth-child(6) {left: -22px; top: 22px; }
    .load-item:nth-child(7) {left: -28px; top: 0; }
    .load-item:nth-child(8) {left: -22px; top: -22px; }
    @for $i from 1 through 8{
        .delay# {$i} {animation-delay:.15 * $i+ s; }}/* SCSS loop syntax, equivalent to.delay1 {animation-delay:.15s; }... . Delay8 {animation - delay: 1.2 s; * /
}

@keyframes loading{
  0%{ transform: scale(.7); opacity:.3; }
  50%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(.7); opacity:.3; }}Copy the code

The full code can be seen here

conclusion

This is a very simple effect with Loading. But it is also a common and practical loading animation, and you can see many other loading demo here. Most of this can be done along the same lines.

However, the final rendering effect is different. In the process of learning and associating, you might as well think more about how many of the effects you have learned can be classified as the same kind of effect.