下面展示的是一批完全只用CSS制作的加载等待动画效果。每个动画只运用了简单的css属性,没有任何繁重的渲染动作和布局计算,都是非常轻量级的代码。
http://netsmell.com/post/css3-loading-animation.html
作者将这些CSS动画代码收集到了loaders.css,你可以轻松的将这个css文件嵌入到你的页面中,然后在需要放置loading图标的地方加入下面的代码。除了这种方式外,作者还提供一种用loaders.css.js
动态控制这些动画的方式。
<div class="loader-inner ball-pulse"></div>
非常的简单。下面的演示并不是图片,是用CSS3的变换功能绘制出来的
源代码
作者将源代码放到了github上,所以,你可以下载下来使用:https://github.com/ConnorAtherton/loaders.css
如果你对这些css技巧敢兴趣,还可以参考下面的文章: