在网页开发过程中，有加载的存在，就有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);
}
}
