页面的head部分先要引入必要的两个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/global.css">
<link type="text/css" rel="stylesheet" href="css/loading.css">

接着设置好页面部分元素的自定义样式，代码如下：

body,html{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.div-btn{
	width: 100%;
	max-width: 560px;
	/*margin:200px auto; */
}

.div-btn div{
	margin: 10px 0 ;
}

.test-div{
	width: 300px;
	height: 300px;
	margin:20px auto;
	border: 1px solid #aaa;
	position: relative;
}

页面的body部分主要用了div作为容器，来放置9个特效样式的按钮，代码如下：

<div class="div-btn">
	<div class="dw-btn btn-success" onClick="loading1()">默认效果</div>
	<div class="dw-btn btn-warning" onClick="loading8()">纵向文字颜色</div>
	<div class="dw-btn btn-primary" onClick="loading2()">纵向效果无title</div>
	<div class="dw-btn btn-danger" onClick="loading3()">纵向效果无title描述</div>
	<div class="dw-btn btn-warning " onClick="loading4()">其他背景色</div>
	<div class="dw-btn btn-success" onClick="loading5()">纵向图片效果</div>
	<div class="dw-btn btn-primary" onClick="loading6()">横向图片效果</div>
	<div class="dw-btn btn-danger" onClick="loading7()">横向进度效果,字体颜色</div>
	<div class="dw-btn btn-warning" onClick="loading10()">无过渡效果</div>
</div>

页面的底部先要引入jQuery库和一个JS文件，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/loading.js"></script>

接着设置个按钮的弹窗事件的响应方法，部分代码如下：

function loading1() {
	$('body').loading({
		loadingWidth:240,
		title:'快看啊!',
		name:'test',
		discription:'一大波福利来了...',
		direction:'column',
		type:'origin',
		// originBg:'#71EA71',
		originDivWidth:40,
		originDivHeight:40,
		originWidth:6,
		originHeight:6,
		smallLoading:false,
		loadingMaskBg:'rgba(0,0,0,0.2)'
	});

	setTimeout(function(){
		removeLoading('test');
	},3000);
}