10 09/2014

pure css ajax loader

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

昨天需测试ie9-10,虚机装win8,花都谢了。每次切过去,老是看见那个“转啊转”的小轮子。嗯 ?于是又开始无聊了

修改下面参数试试?(别把自己的浏览器玩死啦)

时间: 球数: 颜色:

代码

<div class="gAjaxLoader" data-balls="10" data-color="#0c0" data-time="3"></div>

原理

其实不需要 js,但我懒得手工写一堆 div,纯 css 就可以实现。js 只是为了控制 球数、速度和颜色。

嵌入N个div,都 absolute 挪到正中间。然后 translateX 移到最左边,开始 @keyframes 动画 - 旋转 360。

下载源文件: lesscoffee 这个 less 用到了我的 lib.less

查看源文件: cssjs

因为 @keyframes 很罗嗦,所以没有把 容器大小 和 球 大小 写到js。但其实是可以的,看下面

js 控制 @keyframes 还需要第三方插件 CSS Animation Keyframe Events,哎,还是算了吧。大家手工改 less 或者 css 吧