预载是互联网交互设计中必不可少的元素之一，它们负责在内容显示前，既可增强用户体验的视觉有趣化，同时也避免了因低速网络环境导致的长时间响应问题。而CCS3预载不仅是替换图片类预载的优化方案，同时也支持Retina等高清屏幕下的快速显示。
动画预载是内容加载前支持快速响应的最简单动画效果。动画预载经常被使用在动态加载页面或服务器端指示进程操作中。一般我们都会使用压缩后的GIF图片来做动画预载元素。但是现在我们有一个更轻便的优化方案：即用CSS3代码实现全部动画效果，无需用到任何的图片素材。
下面是五个仅使用H5页面和CSS3代码实现的动画预载实例。
预载动画一：双旋圈
在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。
示例：
显示HTML代码：
CSS代码：
预载动画二：交错圈
两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。
示例：
HTML代码：
CSS代码：
预载动画三：旋转圈
一个最传统的圆形预载动画效果。在这个示例中，整个#preloader-3 container div是一直旋转的，而非不同的圆形白色块填充区域。
示例：
HTML代码：
CSS代码：
预载动画四：跳动圈
这是一种墨西哥波浪纹的动画效果，通过设置不同圆圈之间的延迟参数来实现。
示例：
HTML代码：
CSS代码：
预载动画五：雷达圈
一种雷达辐射效果，给3个span elements设置相同的淡入淡出效果，再予每个稍微延迟下即可实现。
示例：
HTML代码：
CSS代码：
总计：
通过这些示例的技术，你可以理解CSS预载基础知识，然后打造自己的预载器。如你所见，这些不同的实现效果都非常有趣！虽然本教程的例子都比较简单，但超简单得就实现了我们所需的动画效果。
翻译：R.E.D / D5工作室 李格锐
本文出自这里>>>：
原作者：Tony Thomas