10 个基于CSS3/jQuery的加载动画设计方案

过去，由于加载图片的格式限制（只能使用GIF格式），设计加载动画不是那么容易。随着技术和浏览器的发展，用 CSS3 和 jQuery 就可以方便地设计加载动画，这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。 

1. Sonic——循环的加载动画 

Sonic是一个很小的JS“类”，你可以用它来创建自定义加载动画——蛇吞尾似的循环动画。 

源码 / 演示 

2. 闪烁的加载动画 

用 CSS3 动画可以实现闪烁跳跃式的正在载入页面效果。 

源码 / 演示 

3. 旋转的加载动画（无需图片） 

CSS transform（Firefox 3.5+和基于Webkit的浏览器中可用）有很多有趣的功能，如旋转、平移、缩放和倾斜等等都可以用来设计加载动画。 

源码 + 演示 

4. Ajax 风格的加载动画（无需图片） 

图片是网站中非常重要的部分，如果使用gif图片作为加载动画，则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS，这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。 

源码 / 演示 

5. 圆圈风格的加载动画 

简洁的 CSS3 代码能生成动画来显示加载进度，在样式类中修改宽度和高度值就可以设置圆圈的大小。 

源码 / 演示 

6. Flickr风格的加载动画 

页面加载时，两个不同颜色的圆圈分别向左向右移动，之后再反向移动，一直重复循环。 

源码 / 演示 

7. Canvas元素加载生成器 

这是一个免费的在线工具，可以为HTML项目生成各种加载动画，包含旋转和闪烁的效果。 

源码 + 演示 

8. CSS3 加载动画 

三个简单的 CSS3 加载动画，分别以圆点、线条、方格的形式呈现。 

源码 / 演示 

9. CSS3 循环加载动画 

三个 CSS3 循环动画，可以应用于许多领域，例如基于 jQuery 的图像预载。 

源码 / 演示 

10. 页面加载——jQuery 插件 

这个jQuery插件能够在加载网页的时候显示加载进度视图，还可以自定义一些参数来设置该视图的颜色、加载图标、背景图片等等。 

源码 / 演示 

英文原文：10 CSS3 and jQuery Loading Animations Solutions

 

转自：http://www.iteye.com/news/24390