CSS3 Dry Goods 22: Make your own loading animation

During the loading process of the webpage, due to internet speed, the loading may not be completed immediately. Then you must prompt the user that it is loading.

In order to avoid being dull when the user is waiting, the loading icon is often made into a small animation.

With CSS3 animation and frame animation, you can easily realize loading small animation.

Main knowledge points

1. Using @keyframes frame animation, write an animation of small circles from large to small and transparency from 1 to 0.

 @keyframes scaleAni {
            0%{
                transform:scale(1,1);
                opacity: 1;
            }
            100%{
                transform:scale(0,0);
                opacity: 0;
            }
 }

2. Use the animation attribute to add animation to each small circle.

PS: Use animation delay time to realize the relay of animation. The delay time can be a negative number~ it means that the animation runs for a period of time in advance.

Cycle infinite, linear at constant speed, alternate 

.loading1 span:nth-child(1){
      animation: scaleAni 0.5s -0.5s  linear infinite alternate ;
 }

.loading1  span:nth-child(1)

表示 .loading1 下，第 1 个 span 子标签。

Complete code

<div class="loading  loading1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

*{
    margin: 0;
    padding: 0;
}
.loading{
    width: 120px;
    height: 120px;
    /*background: #eee;*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    position: relative;
}
.loading span{
    display: block;
    width: 16px;
    height:16px;
    border-radius: 100%;
    background: #f00;
    overflow: hidden;
}

.loading1{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.loading1 span:nth-child(1){
    animation: scaleAni 0.5s -0.5s  linear infinite alternate ;
}
.loading1 span:nth-child(2){
    animation: scaleAni 0.5s -0.4s linear infinite alternate ;
}
.loading1 span:nth-child(3){
    animation: scaleAni 0.5s -0.3s linear infinite  alternate;
}
.loading1 span:nth-child(4){
    animation: scaleAni 0.5s -0.2s linear infinite alternate;
}
.loading1 span:nth-child(5){
    animation: scaleAni 0.5s -0.1s linear infinite alternate;
}
@keyframes scaleAni {
    0%{
        transform:scale(1,1);
        opacity: 1;
    }
    100%{
        transform:scale(0,0);
        opacity: 0;
    }
}

Expand

<div class="loading  loading2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Based on the previous loading CSS.

.loading2 span{
    position: absolute;
    left:50%;
    top:50%;
    margin-left: -8px;
    margin-top: -8px;
    transform-origin: center 60px;
}
.loading2 span:nth-child(1){
    transform: translateY(-52px) rotateZ(0);
}
.loading2 span:nth-child(2){
    transform: translateY(-52px) rotateZ(45deg);
}
.loading2 span:nth-child(3){
    transform: translateY(-52px) rotateZ(90deg);
}
.loading2 span:nth-child(4){
    transform: translateY(-52px) rotateZ(135deg);
}
.loading2 span:nth-child(5){
    transform: translateY(-52px) rotateZ(180deg);
}
.loading2 span:nth-child(6){
    transform: translateY(-52px) rotateZ(225deg);
}
.loading2 span:nth-child(7){
    transform: translateY(-52px) rotateZ(270deg);
}
.loading2 span:nth-child(8){
    transform: translateY(-52px) rotateZ(315deg);
}

.loading2 span:nth-child(1){
    animation: scaleAni2 0.8s -0.8s  linear infinite  both ;
}
.loading2 span:nth-child(2){
    animation: scaleAni2 0.8s -0.7s linear infinite both ;
}
.loading2 span:nth-child(3){
    animation: scaleAni2 0.8s -0.6s linear infinite  both;
}
.loading2 span:nth-child(4){
    animation: scaleAni2 0.8s -0.5s linear infinite both;
}
.loading2 span:nth-child(5){
    animation: scaleAni2 0.8s -0.4s linear infinite both;
}
.loading2 span:nth-child(6){
    animation: scaleAni2 0.8s -0.3s linear infinite both;
}
.loading2 span:nth-child(7){
    animation: scaleAni2 0.8s -0.2s linear infinite both;
}
.loading2 span:nth-child(8){
    animation: scaleAni2 0.8s -0.1s linear infinite both;
}
@keyframes scaleAni2 {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

After understanding the principle and using our imagination, we can do more loading effects~