用css写loading

用css写loading
我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。需要注意的是，border-radius: 50%是让整个正方形元素都变成圆形，即包括边框和内容区。所以我们可以通过控制元素边框和内容区的大小，将元素的内容区域作为内圆，将元素的边框区域作为外圆，从而绘制出一个圆环。
<div class="loading-css"></div>

.loading-css {
    width: 50px; /*先将loading区域变成正方形*/
    height: 50px;
    display: inline-block; /*将loading区域变成行内元素，防止旋转的时候，100%宽度都在旋转*/
    border: 3px solid #f3f3f3; /*设置四周边框大小，并将颜色设置为浅白色*/
    border-top: 3px solid red; /*将上边框颜色设置为红色高亮，以便旋转的时候能够看到旋转的效果*/
    border-radius: 50%; /*将边框和内容区域都变成圆形*/
}

此时效果如下:

圆环效果已经出来了，接下来让圆环旋转起来即可，如:

@keyframes loading-360 {
    0% {
        transform: rotate(0deg); /*动画起始的时候旋转了0度*/
    }
    100% {
        transform: rotate(360deg); /*动画结束的时候旋转了360度*/
    }
}
.loading-css { /*在之前的CSS中加上动画效果即可*/
    animation: loading-360 0.8s infinite linear; /*给圆环添加旋转360度的动画，并且是无限次*/
}