基于js和css3的缓冲图标

最近在做手机端web页面开发，ajax的缓冲等待需要一个缓冲图标，到网上找了个不错的效果，但应用起来不太方便，所以对其进行了行进一步改造和封装，使其更易应用和控制。

废话不多说，代码如下：

1，一个css文件，负责样式：

NSpinner.css

?
2,一个js文件，控制元素创建及显示隐藏：

NSpinner.js

?
3，最后是一个测试html页面：

index.html

?
以上就是所有代码，html页仅负责测试，主要应用时NSpinner.js和NSPinner.css。

原理很简单，首次调用

?
的时候用js创建出所有元素，并添加到body里面，调用

?
的时候将display置为none，第二次及以后调用

?
的时候将display置为block。

注意：因为用到了css3的部分属性，pc端部分浏览器的兼容性可能存在问题，仅对wenkit内核浏览器做了适配。

另外可以到Github上下载项目源码。https://github.com/lufaxin/NSpinner

效果演示:http://www.lufaxin.com/demos/NSpinner/index.html