效果图:
demo地址 http://www.aplusdesign.com.au/demos/ajax-loader/index.html
下载js和图片包
怎样使用
加载CSS
.ajax_overlay {}
.ajax_loader {background: url("spinner_squares_circle.gif") no-repeat center center transparent;width:100%;height:100%;}
spinner_squares_circle.gif这个图片的位置根据自己存放的位置
<script id="loader" src="script.js" type="text/javascript"></script>
js文件的路径根据自己的放的位置
调用和初始化loader
new ajaxLoader(this, options);
this:代表的是显示的jQuery对象。
可以写成:·$("#abc").
有一点需要注意为了保证 spinner 可以显示在正确的位置,需要把 id为abc (例子而已)css属性设定成
#abc{
position: relative;
overflow: hidden;
}
设定option
var options = {
bgColor : '#fff',
duration : 800,
opacity : 0.7,
classOveride : false
}
上面的参数可以根据自己的需要进行设定。
各个参数解释如下:
- bgColor: string – colour of the background overlay
- duration: number – length of fadeIn and fadeOut effects
- opacity: number – opacity of the background overlay
- classOveride: string – a class name to over-ride your default loader style