在本教程中我们将告诉如何只使用纯CSS制作出动态的Loader加载提示。今天，我们将用CSS动画动作很多事情。事实上，这里我们主要谈谈CSS动画加载,准备好了？
开始前的一些内容：
你不会看到任何带供应商前缀的CSS代码段，但是，当然，你回在文件中找到他们。
本教程的目的是显示CSS的潜力，特别是CSS3，这就是为什么IE9的渲染上可能发生改变。如果您计划来支持这些浏览器，请反馈给我们。
我个人使用的盒模型 [width] = [element-width] + [padding] + [borders]。请看下面的代码片断：
*,
*:before,
*:after {
box-sizing: border-box;
}
CSS的优点和缺点
纯CSS实现的加载和预加载动画的优点和缺点是什么？为什么不是一个JS的解决方案，甚至是原始的方式：一个动画GIF？回答没有什么神奇的，它会视乎情况而定。但是，让我给你一些想法。
优点
CSS是很容易编辑：您可以快速更改的时间，速度，颜色或任何你对你的动画做的事情
CSS是“类矢量”：你可以在没有任何显示质量损失的情况下缩放它
CSS动画的速度比JS“动画”（不是真正的动画）更快，因为css使用本地浏览器引擎。
CSS动画，使用GPU加速：如果你有一个很好的设备，动画将会非常快速和流畅
CSS动画可以很容易地暂停和播放
缺点
CSS动画没有完整的浏览器支持：比如IE9和Opera Mini
CSS加载动画会产生标签，不一定是值得付出的
CSS动画不能很容易地用javascript指针事件触发（hover除外）
你可以使用Modernizr js库来检测浏览器对CSS动画的支持与否，支持他们的浏览器使用CSS动画和不支持的使用正规的GIF图片。实现双赢。
CSS加载动画例子一
中间小球将无限的在左右之间摆动。让用户了解应用程序或网站正在处理请求是很重要的。
HTLM 标签
是不是非常简单，我们甚至可以用一个Element实现，但是那样CSS将变得很丑陋，简洁的标签和美观的CSS才是我们追求的。
CSS部分
首先，为摆动的小球建立一个容器。为了保持动画比例和矢量性，我用em 单位。简单的修改font-size值就会让它如你所想的进行缩放，是不是很酷~
.demo-1 .bar {
/* Size and position */
font-size: 20px; /* 1em */
width: 10em;
height: 1em;
position: relative;
margin: 100px auto;
/* Styles */
border-radius: .5em; /* Height/2 */
background: white; /* Fallback */
background: rgba(255,255,255,0.6);
box-shadow:
0 0 0 .05em rgba(100,100,100,0.075), /* Subtle border */
0 0 0 .25em rgba(0,0,0,0.1), /* Outter border */
inset 0 .1em .05em rgba(0,0,0,0.1), /* Inset shadow */
0 .05em rgba(255,255,255,0.7); /* Slight reflection */
}
.demo-1 .bar:after {
/* Content and position */
content: “Please wait.”;
position: absolute;
left: 25%;
top: 150%;
/* Font styles */
font-family: ‘Carrois Gothic’, sans-serif;
font-size: 1em;
color: #555;
text-shadow: 0 .05em rgba(255,255,255,0.7);
}
我们来看看小球的css
.demo-1 .sphere {
/* Size */
display: block;
width: 1em;
height: 100%;
/* Styles */
border-radius: 50%;
background: linear-gradient(#eee, #ddd);
box-shadow:
inset 0 .15em .1em rgba(255,255,255,0.3), /* Top light */
inset 0 -.1em .15em rgba(0,0,0,0.15), /* Bottom shadow */
0 0 .25em rgba(0,0,0,0.3); /* Outter shadow */
/* Animation */
animation: move 1.75s ease-in-out infinite alternate;
}
最后，最重要的，运行动画的keyframes
@keyframes move {
to { margin-left: 90%; }
}
是不是非常简单，现在小球将在滚动条中每隔1.75秒自由的来回滚动。
说明：如果你想把小球滚动效果改成进度条，你可以在animation说明中去掉alternate参数。并修改你想让用户等待的时间。如果想动态的修改等待时间，就需要一些Javascript的操作了。
原文链接：http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/