使用CSS3来制作各种loading

在网页开发过程中，有加载的存在，就有loading的存在，在传统网页开发过程中，通常都是设计师设计loading样式，做成gif的形式，这种方式固然很好，但是使用css3制作loading加载速度更加的快，样式也便于控制。

制作loading方法和样式很多，本篇文章只是提供一个简单制作的思路，时间有限，所以一些浏览器可能存在兼容性问题。

首先看一下加载效果图

实心加载 部分旋转加载 列加载

1，实心加载loading和实心带箭头loading

<div class="loading-rotate-full"></div>
<div class="loading-rotate-full arrow"></div>

.loading-rotate-full {
    width: 30px;
    height: 30px;
    border: 3px solid #777;
    border-top-color: transparent;
    border-radius: 50%;
    -webkit-animation: rotate 1s linear infinite;
    box-sizing: border-box;
}
.loading-rotate-full.arrow:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    border: 7px solid;
    box-sizing: border-box;
    border-color: #777 #777 transparent transparent;
}
@-webkit-keyframes rotate{
    from{
        -webkit-transform: rotate(0);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

注意：加载动画的方式由animation-timing-function决定，除了linear匀速加载外，其他的方式都有一个短暂的停留过程！

2，部分旋转loading和停留位置变化loading

<div class="loading-rotate"></div>
<div class="loading-rotate lazy"></div>

.loading-rotate {
    position: relative;
    width: 30px;
    height: 30px;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate linear 1s infinite;
    transform-origin:center center;
    box-sizing: border-box;
}       
.loading-rotate:before {
    content: "";
    position: absolute;
    left: 0;  top: 0;
    width: 100%;  height: 100%
    box-sizing: border-box;
    border: 3px solid transparent;
    border-top-color: #ff4500;
    border-radius: 50%;
    z-index: 10;
}
.loading-rotate:after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 30px;  height: 30px;
    border: 3px solid #ddd;
    box-sizing: border-box;
    border-radius: 50%;
}
/*旋转位置不停变化*/
.loading-rotate.lazy {
    -webkit-animation: rotate-lazy 6s ease-in-out infinite;
    animation: rotate-lazy ease-in-out 6s infinite;
}    
@-webkit-keyframes rotate-lazy{
    0{
        -webkit-transform: rotate(0);
    }
    25%{
        -webkit-transform: rotate(450deg);
    }
    50%{
        -webkit-transform: rotate(900deg);
    }
    75%{
        -webkit-transform: rotate(1350deg);
    }
    100%{
        -webkit-transform: rotate(1800deg);
    }       
}

停留位置变化loading的原理是每次旋转上一次的度数+旋转变化的位置，我的是每次比上次多旋转90deg。

3，列loading

<div class="loading-list">
    <i class="load-list-aside" style="background-color: #ff4500;"></i>
    <i class="load-list-middle" style="background-color: green;"></i>
    <i class="load-list-aside" style="background-color: #F012BE;"></i>
</div>

.loading-list {
    width: 50px;
    height: 30px;
}
.loading-list i {
    display: inline-block;
    margin: 10px 3px;
    height: 14px;
    width: 4px;
    background: #ddd;
}
.loading-list .load-list-aside {
    -webkit-animation: line-aside 1s linear infinite;
}

.loading-list .load-list-middle {
    -webkit-animation: line-middle 1s linear infinite;
}

@-webkit-keyframes line-aside {
    0%{
        -webkit-transform: scale(0);
    }
    50%{
        -webkit-transform: scale(1);
    }
    100%{
        -webkit-transform: scale(0);
    }
}

@-webkit-keyframes line-middle {
    0%{
        -webkit-transform: scale(1);
    }
    50%{
        -webkit-transform: scale(0);
    }
    100%{
        -webkit-transform: scale(1);
    }
}

预览demo