CSS3干货22：做一个自己的 loading 动画

网页在加载内容过程中，因为网速原因，可能不会马上加载完毕。那么要提示用户正在加载中。

为了避免用户等待的时候显得枯燥，往往会把 loading 图标做成小动画。

用 CSS3 的 animation 和 帧动画，可以轻松实现 loading 小动画。

主要知识点

1、利用 @keyframes 帧动画，写出小圆圈由大到小，透明由 1 到 0 的动画。

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

2、利用 animation 属性给每个小圈添加动画。

PS：利用 animation 延迟时间实现动画的接力。延迟时间可以为负数哦~就表示动画提前运行一段时间。

循环  infinite ，匀速  linear ，往返  alternate 

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

.loading1  span:nth-child(1)

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

完整代码

<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;
    }
}

拓展下

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

基于之前的 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;
    }
}

明白原理后，发挥想象，我们可以做更多的 loading 效果~