纯css去实现loading动画效果图

当项目中加载内容慢的的时候，需要显示一个loading动画效果图
之前我们使用的是一圈点点旋转的效果，现在设计修改为，如下gif图片效果
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
真假美猴王之－－－真假loading效果图，链接如下
http://output.jsbin.com/xutacedica
打开链接预览效果，您能一眼看出，谁是图片制作的gif?谁是css写的loading效果？
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
旋转的gif，一般我们首先想到的是图片，也如此，大多数是使用gif图片的．
然，感觉图片，体积大，旋转的gif比透明的png高了3倍大小
遂，尝试,css实现旋转loading效果
-----------html代码------------
<b></b>
-----------html代码------------

--------------css核心代码----------------
b {
background: url(../icon-bg.png) no-repeat center;
background-size: 51px 51px;
}

b {
border-right-color: transparent;
border-radius: 45px;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 90px;
height: 90px;
}

b:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 86px;
height: 86px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 2px #469CEE solid;
clip: rect(50px, 90px, 90px, 0);
-webkit-animation: b 1.1s infinite linear;
-webkit-animation: b 1.1s infinite linear;
-moz-animation: b 1.1s infinite linear;
-o-animation: b 1.1s infinite linear;
animation: b 1.1s infinite linear;
}

b:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 86px;
height: 86px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 2px #469CEE solid;
clip: rect(0, 90px, 40px, 0);
-webkit-animation: b 1.1s infinite linear;
-webkit-animation: b 1.1s infinite linear;
-moz-animation: b 1.1s infinite linear;
-o-animation: b 1.1s infinite linear;
animation: b 1.1s infinite linear;
}

--------------css核心代码----------------

如此，即可！纯css实现loading效果图，页面及样式并png图片加起来实现的体积大小，为ps生成的gif放图片，1/3
且效果连续展现，完美，没有卡顿于锯齿。

感谢zyx,lost等得以精益求精
下载链接地址 https://files.cnblogs.com/files/leshao/loading%E5%AE%9E%E7%8E%B0gif.rar