[css3特效]loading加载中

作者：zccst

以前loading都是一张图片，显示或隐藏。
现在如果考虑移动端弱网到连图片也载入不成功，此时css3的loading就非常有用了，而且模拟了图片效果，节省空间。

基本原理：
1，外部一个span，固定宽高（正方形），行内块元素，相对定位，垂直对齐。
2，内部12个span，相对宽高（相对外部），行内块元素，绝对定位(top,left)，颜色，背景色，动画（最重要，作用是颜色从重变浅）
3，每一个span单独写css，目的是位置（通过rotate和translate）和延迟时间（animation-delay）。

目测，每一个span里color多余，内部12个公共span的border-radius多余。

<style type="text/css">
.load2 {padding:15px 0;text-align:center;font-size:14px;background:#ffffff;height: 25px;}

@-webkit-keyframes loading {
  from {opacity: 1;}
  to {opacity: 0.2;}
}
.loading {display: inline-block;margin-right:20px;position: relative;width: 12px;height:12px;vertical-align:7px;}
.loading span {display:inline-block;width: 20%;height: 40%;color:#ff7800;background: #ff7800;position: absolute;left: 100%;top: 100%;opacity: 0;-webkit-animation: loading 0.9s linear infinite;-webkit-border-radius: 30px;}
.loading .bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;color:#ff7800;}
.loading .bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;color:#ff7800;}
.loading .bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;color:#ff7800;}
.loading .bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;color:#ff7800;}
.loading .bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;color:#ff7800;}
.loading .bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;color:#ff7800;}
.loading .bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;color:#ff7800;}
.loading .bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
.loading .bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;color:#ff7800;}
.loading .bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;color:#ff7800;}
.loading .bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;color:#ff7800;}
.loading .bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;color:#ff7800;}
</style>

<div class="load2">
	<span class="loading">
		<span class="bar1"></span>
		<span class="bar2"></span>
		<span class="bar3"></span>
		<span class="bar4"></span>
		<span class="bar5"></span>
		<span class="bar6"></span>
		<span class="bar7"></span>
		<span class="bar8"></span>
		<span class="bar9"></span>
		<span class="bar10"></span>
		<span class="bar11"></span>
		<span class="bar12"></span>
	</span>
	<label style="cursor:pointer;">正在加载</label>
</div>