css3 实现loading效果

1 圆点渐入渐出

要点： 缩放和透明度的变化,循环变化

<div class="demo1"></div>

.demo1{
            width: 40px;
            height: 40px;
            margin: 0 auto;
            border-radius: 100px;
            background-color: red;
            opacity: 1;
            animation: fadeIn 1s infinite ease-in-out;
        }
        @-webkit-keyframes fadeIn{
            from{
                transform: scale(0);
            }
            to{
                transform: scale(1);
                opacity: 0;
            }
        }
        @keyframes fadeIn{
            from{
                transform: scale(0);
            }
            to{
                transform: scale(1);
                opacity: 0;
            }
        }

2 线条loading图

要点：使用缩放实现线条的高度的变化，循环变化，使用animation-delay的负值实现动画的连续变化（负值：动画立即执行，从设置的值之后开始执行动画，比如是-1s，表示从动画的1s之后开始执行，前一秒的动画直接跳过，不执行）

html

<div class="demo2">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
            <div class="line4"></div>
            <div class="line5"></div>
        </div>

css

.demo2 div{
    width: 3px;
    height: 20px;
    margin-right: 2px;
    display: inline-block;
    background-color: green;
    animation: loading 1.2s infinite ease-in-out;

}
 .demo2 .line2{
    animation-delay: -1.1s;
}
.demo2 .line3{
    animation-delay: -1s;
}
.demo2 .line4{
    animation-delay: -0.9s;
}
.demo2 .line5{
    animation-delay: -0.8s;
} 
@keyframes loading{
    0%,40%,100%{
        transform: scaleY(.4);
    }
    20%{
        transform: scaleY(1);
    }
 }
 @-webkit-keyframes loading{
    0%,40%,100%{
        transform: scaleY(.4);
    }
    20%{
        transform: scaleY(1);
    }
 }

3 旋转圆圈loading

要点：利用边框颜色实现，实现一个圆有一个边的颜色不一样，然后让元素一直循环旋转；

<div class="dem3"></div>

.demo3{
    width: 100px;
    height: 100px;
    border: 3px solid #eee;
    border-left-color: #fff;
    margin: 100px auto;
    border-radius: 100px;
    animation: loading1s infinite linear;
}

@keyframes loading{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}