不支持css3的童鞋就直接路过吧。。(本demo需要支持的css有:元素圆角、元素旋转【调每个花瓣的角度用的】)

下面是各种等待状态时的动画!!

Apple的小菊花

(被我放大了。。)如果你看到的下面的例子中的菊花和这张图里的不一样(背景色不算),就说明你需要路过了,换个支持css3的浏览器再回来看吧。

这个是我用div做出来的菊花(纯黑)怎么让它转起来呢?(插一句:我好厉害哦,把它做的和apple的菊花一样一样的。。)

菊花代码:

方法1

(貌似有点费cpu,内存占用波动在9MB之间,就是变大-变小-变大-变小~~~)要降低CPU使用就自己写代码来控制花瓣透明度而不要用jquery(降低操作频率)
先把这些div花瓣的透明度设置成0.4,再做3个js(jquery)来控制花瓣显示状态的函数,一个huabanblack让花瓣变黑,一个huabanwhite让花瓣变白,一个huabanzhuan来启动前面两个函数,(不要喷我的命名水平。。)

(很多例子同时运行的话有些电脑会吃不消,所以做了这两个按钮,一定要按顺序按下去,不然就停不下来了。。)

方法2

就是把每个花瓣设置好一定的透明度,然后用css按照一定的角度旋转整个菊花div。。。
(这是一个很2又简单的方法,不过css3支持还是需要的)
此方法CPU占用低,不过看起来没有上面那个舒服。。不够顺,右边这个是给整个div加上背景色的效果,可以看出原理。

方法3

引用自http://www.alloyteam.com/2012/05/loadingpng/,不介绍了,点这个链接查看详情
(CPU占用低,内存情况未检查,似乎会变多。只是涉及图片了,就没什么意思了)

其他用gif什么的就不在这里扯了。。

一串方块div的加载动画

上面的菊花似乎有点晕。。接下来是方块了

这个是由上面的菊花的9个div改装出来的(这里有20个)。把花瓣排整齐,再改成方形就行了,js代码修改id部分即可,缺点同样是CPU占用高,不过效果比较好

(很多例子同时运行的话有些电脑会吃不消,所以做了这两个按钮,一定要按顺序按下去,不然就停不下来了。。)