loading插件

这是我自己写的一个插件,算是个简单的加载动画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的加载动画

示例三:使用文字和颜色

示例四:使用图片

最大化,收缩,关闭卡片

离思 - 孟郊

不寐亦不语,片月秋稍举。孤鸿忆霜群,独鹤叫云侣。

怨彼浮花心,飘飘无定所。高张系繂帆,远过梅根渚。

回织别离字,机声有酸楚。