一个非常简易 又好看的 页面正在加载效果的资源 jquery - loading

资源地址：https://download.csdn.net/download/qq_25221835/10746287   需要的可以去下载

 

首先看效果：

 

需要js: loading.js 和 jquery.js

 css:

代码：

（1）引入 资源文件

 （2）编写 js 代码，removeLoading 是使   加载  结束   （rgba 前面 是 rgb 的数值，最后一位 为 透明度，范围 为 0-1，越低透明度越高）

 （3） removeLoading 是close 掉这个加载效果

（4） 代码

  $('body').loading({
				loadingWidth:225,
				loadingHeight:135,
				title:'正在生成脚本',
				name:'createScript',
				discription:'',
				titleColor:'#FFFFFF',
				direction:'column',
				type:'origin',
				originBg:'#FF7F50',
				originDivWidth:60,
				originDivHeight:60,
				originWidth:10,
				originHeight:10,
				smallLoading:false,
				loadingBg:'rgba(61,170,233,0.9)',
				loadingMaskBg:'rgba(0,0,0,0.2)'
			    });

	removeLoading('createScript');

（5）属性介绍

direction

方向，column纵向 row 横向

animateIn

进入类型,这里不需要引用animatecss(因为个人觉得loading效果不需要太花哨,默认fadeInNoTransform,其他设置都不会有动画效果)

title

loading的title名称 为'' 则不显示

titleColor

title的文字颜色

name

loading的name名称 这算是唯一标识,重复的name的loading不会再生成,因此每次需要给一个name属性

type

loading显示的样式   是转动的小圆球 origin 还是图片 pic

discription

loading的描述  为'' 则不显示

discColor

loading的描述颜色

loadingWidth

默认260 loading的宽度

loadingBg

默认 'rgba(0, 0, 0, 0.6)' loading的背景色

borderRadius

默认12 loading的圆角

loadingMaskBg

默认 transparent loading的遮罩层背景色

zIndex

默认 1000001 loading的层级

圆形旋转的loading样式  （origin）

originDivWidth

默认 60 loading内部圆球区域的宽度

originDivHeight

默认 60 loading内部圆球区域的高度

originWidth

默认 8 小圆球的宽度

originHeight

默认 8 小圆球的高度

originBg

默认'#fefefe' 小圆球的背景色

smallLoading

默认 false 是否显示更小一点的旋转小球效果

这是图片的样式   （pic）

imgSrc

默认的图片地址

imgDivWidth

默认 80 图片的宽度

imgDivHeight

默认 80 图片的高度

flexCenter

默认false, 是否用flex布局让loading-div垂直水平居中

flexDirection

默认'row' row column flex的方向 横向 和 纵向

mustRelative

默认false 调用loading的元素是否规定relative