众所周知，loading已经充斥了各种页面当中：页面加载尚未完成前、瀑布流页面到达底部后加载新的数据之前、表单页面提交数据等待反馈之前，往往都会其相关数据到来前加一个loading等代图来过渡，其目的是提升页面的友好度，增强用户体验。
在现如今的大数据时代，这一点大为重要，但是有一个问题出现了，倘若在一个网络较差的环境下，loading一直存在，容易让用户产生倦怠，故而放弃该页面的访问。因此将页面loading做的更有趣味性就尤为重要，loading越有趣用户停留在页面的时间就会相应加长，从而也给数据的加载争取了宝贵的时间。
那么接下来就是loading的问题，传统页面的loading都是由设计师来设计一个gif图来实现，这样就产生了一个矛盾：gif图是图片加载它也需要耗费时间，同时如果要做的有趣就是要在图片的颜色和动画上下功夫，这样又可能导致gif图大小越做越大，从而拖慢了页面的加载时间。
综上所述，前端工程师利用自己的技术来制作loading尤为重要，好处有两点：
1.因为loading是用相关的css和html制作，不需要加载gif图片，故一定程度上节省了加载时间；
2.因为是自己写的，所以动画上自己可以更好的控制；
本人不才，利用业余时间制作的几个利用css3制作loading的demo，供大家参考，时间有限可能有一些浏览器兼容问题，欢迎与我沟通相关技术问题。
css部分
*{margin:0;padding:0;}
.boxflex{display:box;display:-webkit-box;}
.center{display:box;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
.box{width:200px;height:200px;border:1px solid #ccc;position:relative;}
.move{animation:move 2s infinite;-webkit-animation:move 2s infinite;}
.scale{animation:scale 1s infinite;-webkit-animation:scale 1s infinite;}
.line{animation:line 1s infinite;-webkit-animation:line 1s infinite;}
.fz{animation:fz 1.5s infinite;-webkit-animation:fz 1.5s infinite;}
.delay1{animation-delay:0.25s;-webkit-animation-delay:0.25s;}
.delay2{animation-delay:0.5s;-webkit-animation-delay:0.5s;}
.load{width:100px;height:100px;border:10px solid #ccc;border-radius:50%;display:block;}
.load1{border-top:10px solid #64efb9;}
.load2{position:relative;}
.load2:before{position:absolute;top:0;left:50%;margin-left:-10px;margin-top:-15px;width:20px;height:20px;border-radius:50%;background:#fff;content:'';box-shadow:0 0 10px #747373;}
.sc,.li{display:block;}
.sc i{width:20px;height:20px;background:#64efb9;border-radius:50%;display:inline-block;margin:0 10px;}
.li i{display:inline-block;background:#64efb9;width:10px;height:50px;margin:0 4px;}
.li em{background:#fff;border:10px solid #64efb9;width:50px;height:50px;display:inline-block;}
.li i:nth-child(2){animation-delay:.2s;-webkit-animation-delay:.2s;}
.li i:nth-child(3){animation-delay:.3s;-webkit-animation-delay:.3s;}
.li i:nth-child(4){animation-delay:.4s;-webkit-animation-delay:.4s;}
.li i:nth-child(5){animation-delay:.5s;-webkit-animation-delay:.5s;}
.li i:nth-child(6){animation-delay:.6s;-webkit-animation-delay:.6s;}
animation制作动画部分
@keyframes move{
0%{
transform:rotateZ(0);
}
100%{
transform:rotateZ(360deg);
}
}
@-webkit-keyframes move{
0%{
-webkit-transform:rotateZ(0);
}
100%{
-webkit-transform:rotateZ(360deg);
}
}
@keyframes scale{
/*0%{
transform:scale3d(1,1,1);
}*/
50%{
transform:scale3d(0,0,0);
}
/*100%{
transform:scale3d(1,1,1);
}*/
}
@-webkit-keyframes scale{
/*0%{
-webkit-transform:scale3d(1,1,1);
}*/
50%{
-webkit-transform:scale3d(0,0,0);
}
/*100%{
-webkit-transform:scale3d(1,1,1);
}*/
}
@keyframes line{
50%{
transform:scaleY(0);
}
}
@-webkit-keyframes line{
50%{
-webkit-transform:scaleY(0);
}
}
@keyframes fz{
0%{
transform:perspective(160px);
}
50%{
transform:perspective(160px) rotateX(-180deg) rotateY(0);
}
100%{
transform:perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}
@-webkit-keyframes fz{
0%{
-webkit-transform:perspective(160px);
}
50%{
-webkit-transform:perspective(160px) rotateX(-180deg) rotateY(0);
}
100%{
-webkit-transform:perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}
html部分
<div class="boxflex">
<div class="box center">
<span class="load load1 move"></span>
</div>
<div class="box center" style="background:#64efb9;">
<span class="load load2 move"><i></i></span>
</div>
<div class="box center">
<span class="sc">
<i class="scale"></i>
<i class="scale delay1"></i>
<i class="scale delay2"></i>
</span>
</div>
<div class="box center">
<span class="li">
<i class="line"></i>
<i class="line"></i>
<i class="line"></i>
<i class="line"></i>
<i class="line"></i>
<i class="line"></i>
</span>
</div>
<div class="box center">
<span class="li">
<em class="fz"></em>
</span>
</div>
</div>
页面demo效果
![Uploading QQ截图20160727155536_186844.png . . .]
