10
09/2014
pure css ajax loader
昨天需测试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。
下载源文件: less 和 coffee 这个 less 用到了我的 lib.less
因为 @keyframes 很罗嗦,所以没有把 容器大小 和 球 大小 写到js。但其实是可以的,看下面
js 控制 @keyframes 还需要第三方插件 CSS Animation Keyframe Events,哎,还是算了吧。大家手工改 less 或者 css 吧