这是我自己写的一个插件,算是个简单的加载动画js插件,里面的一些定位的计算参考了网上的开源项目,可以采用css loading动画或者图片,并且设置loading文字。
$('#test-btn').click(function() {
var l = $('body').lyearloading({
opacity : 0.1, // 遮罩层透明度,为0时不透明
backgroundColor : '#ccc', // 遮罩层背景色
imgUrl : '', // 使用图片时的图片地址
textColorClass : 'text-success', // 文本文字的颜色
spinnerColorClass : 'text-success', // 加载动画的颜色(不使用图片时有效)
spinnerSize : 'lg', // 加载动画的大小(不使用图片时有效,示例:sm/nm/md/lg,也可自定义大小,如:25px)
spinnerText : '加载中...', // 文本文字
zindex : 9999, // 元素的堆叠顺序值
});
setTimeout(function() {
l.hide(); // 页面中如果有多个loading,最好用destroy,避免后面的loading设置不生效
}, 500000)
});
示例一:按钮上的加载动画
示例二:基于整个body的加载动画
示例三:使用文字和颜色
示例四:使用图片