guosen-ldt-client/components/loading/loading.vue

<template>
	<!-- 1、常用loading加载弹窗 -->
	<view class="aui-loading aui-loading-ring" :class="{'aui-loading-ring-row': direction == 'row'}" v-if="SHOW && type == 1">
		<view class="aui-mask" v-if="mask" @touchmove.stop.prevent></view>
		<view class="aui-loading-main">
			<view class="aui-loading-animate">
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
			</view>
			<view class="aui-loading-msg" v-if="msg">{{msg}}</view>
		</view>
	</view>
	<!-- 2、按钮内显示loading加载动画 -->
	<view class="aui-loading aui-loading-button" v-else-if="SHOW && type == 2">
		<view class="aui-loading-main" :style="{background: styles.background, borderRadius: styles.borderRadius, zIndex: styles.zIndex}">
			<view class="aui-loading-warp">
				<view class="aui-loading-animate">
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
					<view class="span" :style="{borderColor: styles.color}"></view>
				</view>
				<view class="aui-loading-msg" v-if="msg" :style="{color: styles.color}">{{msg}}</view>
			</view>
		</view>
	</view>
	<!-- 3、特殊风格loading加载弹窗 -> 四方块旋转 -->
	<view class="aui-loading aui-loading-squarefour" :class="{'aui-loading-squarefour-style-1': theme==1, 'aui-loading-squarefour-style-2': theme==2}" v-else-if="SHOW && type == 3">
		<view class="aui-mask" v-if="mask" @touchmove.stop.prevent></view>
		<view class="aui-loading-main" :style="{background: styles.background, zIndex: styles.zIndex}">
			<view class="aui-loading-animate">
				<view class="span1"></view>
				<view class="span2"></view>
				<view class="span3"></view>
				<view class="span4"></view>
			</view>
			<view class="aui-loading-msg" style="top: 40%;" v-if="msg" :style="{color: styles.color}">{{msg}}</view>
		</view>
	</view>
	<!-- 4、三平行四边形放大缩小(全屏首次加载过度动画) -->
	<view class="aui-loading aui-loading-dots" v-else-if="SHOW && type == 4">
		<view class="aui-mask" v-if="mask" @touchmove.stop.prevent></view>
		<view class="aui-loading-main">
			<view class="aui-loading-dot-items">
				<view class="aui-loading-dot-item dot_one"></view>
				<view class="aui-loading-dot-item dot_two"></view>
				<view class="aui-loading-dot-item dot_three"></view>
			</view>
		</view>
	</view>
	<!-- 5、三圆点背景过度(全屏首次加载过度动画) -->
	<view class="aui-loading aui-loading-dots-opacity" v-else-if="SHOW && type == 5">
		<view class="aui-mask" v-if="mask" @touchmove.stop.prevent></view>
		<view class="aui-loading-main">
			<view class="aui-loading-dot-items">
				<view class="aui-loading-dot-item dot_one"></view>
				<view class="aui-loading-dot-item dot_two"></view>
				<view class="aui-loading-dot-item dot_three"></view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "aui-loading",
		props: {
			type: { //默认圆环风格(<1>、1:toast圆环风格，<2>、2:点击按钮后在按钮内显示加载动画) <3>、3:四方块水平方向旋转，
				type: Number,
				default: 1
			},
			mask: { //是否显示遮罩，默认false
				type: Boolean,
				default: true
			},
			direction: { //横向("row")或纵向("col")控制，默认纵向
				type: String,
				default: 'row'
			},
			theme: { //控制风格 type==3时生效
				type: Number,
				default: 1
			},
			styles: { //样式
				type: Object,
				default () {
					return {
						color: '',
						borderRadius: '',
						background: '',
						zIndex: ''
					};
				}
			},
		},
		data() {
			return {
				msg:'加载中...',
				SHOW: false, //是否显示
			};
		},
		created(){
			//console.log(this.styles);
		},
		methods:{
			//显示
			show(msg='加载中...'){
				var _this = this;
				_this.msg=msg
				return new Promise(function(resolve, reject){
					_this.SHOW = true;
					var Timer = setTimeout(function(){
						clearTimeout(Timer)
						_this.hide(); //隐藏loading
					},2000)
					resolve();
				});
			},
			showLoading(msg='加载中...'){
				var _this = this;
				_this.msg=msg
				return new Promise(function(resolve, reject){
					_this.SHOW = true;
					resolve();
				});
			},
			//隐藏
			hide(){
				var _this = this;
				return new Promise(function(resolve, reject){
					_this.SHOW = false;
					resolve();
				});
			},
		}
	}
</script>

<style>
	/* loading加载弹窗 */
	/* loading-ring 样式设置 */
	.aui-loading.aui-loading-ring{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.aui-loading.aui-loading-ring .aui-loading-main{
		width: auto;
		height: auto;
		min-width: 55px;
		min-height: 55px;
		background: rgba(0,0,0,.8);
		border-radius: 10px;
		box-shadow: 0 0 1px rgba(100,100,100,.5);
		padding: 15px;
		box-sizing: border-box;
		-ms-animation: aui-fade-in .1s ease-out forwards;
		-webkit-animation: aui-fade-in .1s ease-out forwards;
		animation: aui-fade-in .1s ease-out forwards;
		position: absolute;
		top: 40%;
		left: 50%;
		z-index: 999;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.aui-loading.aui-loading-ring .aui-loading-animate{
		width: 25px;
		height: 25px;
		margin: 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 999;
	}
	.aui-loading.aui-loading-ring .aui-loading-msg{
		width: 100%;
		height: 17px;
		max-width: -webkit-calc(100vw - 40px);
		max-width: calc(100vw - 40px);
		line-height: 17px;
		position: relative;
		top: 5px;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #FFF;
		text-align: center;
		opacity: .8;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span{
		width: -webkit-calc(100% - 6px);
		width: calc(100% - 6px);
		height: 2px;
		display: inline-block;
		border-radius: 2px;
		position: absolute;
		box-sizing: initial !important;
		top: -webkit-calc(50% - 1px);
		top: calc(50% - 1px);
		left: 0;
		opacity: 0.3;
		-ms-animation: load-button 0.6s ease infinite;
		-webkit-animation: load-button 0.6s ease infinite;
		animation: load-button 0.6s ease infinite;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(1){
		border-left: 6px solid #FFF;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-ms-animation-delay: 0.05s;
		-webkit-animation-delay: 0.05s;
		animation-delay: 0.05s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(2){
		border-left: 6px solid #FFF;
		-ms-transform: rotate(30deg);
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
		-ms-animation-delay: 0.1s;
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(3){
		border-left: 6px solid #FFF;
		-ms-transform: rotate(60deg);
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
		-ms-animation-delay: 0.15s;
		-webkit-animation-delay: 0.15s;
		animation-delay: 0.15s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(4){
		border-left: 6px solid #FFF;
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		-ms-animation-delay: 0.2s;
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(5){
		border-left: 6px solid #FFF;
		-ms-transform: rotate(120deg);
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg);
		-ms-animation-delay: 0.25s;
		-webkit-animation-delay: 0.25s;
		animation-delay: 0.25s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(6){
		border-left: 6px solid #FFF;
		-ms-transform: rotate(150deg);
		-webkit-transform: rotate(150deg);
		transform: rotate(150deg);
		-ms-animation-delay: 0.3s;
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(7){
		border-right: 6px solid #FFF;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-ms-animation-delay: 0.35s;
		-webkit-animation-delay: 0.35s;
		animation-delay: 0.35s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(8){
		border-right: 6px solid #FFF;
		-ms-transform: rotate(30deg);
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
		-ms-animation-delay: 0.4s;
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(9){
		border-right: 6px solid #FFF;
		-ms-transform: rotate(60deg);
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
		-ms-animation-delay: 0.45s;
		-webkit-animation-delay: 0.45s;
		animation-delay: 0.45s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(10){
		border-right: 6px solid #FFF;
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		-ms-animation-delay: 0.5s;
		-webkit-animation-delay: 0.5s;
		animation-delay: 0.5s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(11){
		border-right: 6px solid #FFF;
		-ms-transform: rotate(120deg);
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg);
		-ms-animation-delay: 0.55s;
		-webkit-animation-delay: 0.55s;
		animation-delay: 0.55s;
	}
	.aui-loading.aui-loading-ring .aui-loading-animate .span:nth-child(12){
		border-right: 6px solid #FFF;
		-ms-transform: rotate(150deg);
		-webkit-transform: rotate(150deg);
		transform: rotate(150deg);
		-ms-animation-delay: 0.6s;
		-webkit-animation-delay: 0.6s;
		animation-delay: 0.6s;
	}
	
	.aui-loading.aui-loading-ring.aui-loading-ring-row .aui-loading-main{
		display: block;
		min-height: 40px;
		padding: 10px 15px;
		border-radius: 6px;		
	}
	.aui-loading.aui-loading-ring.aui-loading-ring-row .aui-loading-animate{
		display: inline-block;
		vertical-align: top;
	}
	.aui-loading.aui-loading-ring.aui-loading-ring-row .aui-loading-msg{
		width: auto;
		height: 25px;
		line-height: 25px;
		top: 0;
		margin-left: 10px;
		display: inline-block;
		vertical-align: top;
	}
	/* loading-button 样式设置 */
	.aui-loading.aui-loading-button{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.aui-loading.aui-loading-button .aui-loading-main{
		width: 100%;
		height: 100%;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 996;
		background: #FFF;
		white-space: nowrap;
		-ms-animation: aui-fade-in .2s ease-out forwards;
		-webkit-animation: aui-fade-in .2s ease-out forwards;
		animation: aui-fade-in .2s ease-out forwards;
	}
	.aui-loading.aui-loading-button .aui-loading-warp{
		width: auto;
		height: auto;
		display: flex;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.aui-loading.aui-loading-button .aui-loading-animate{
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: top;
		position: relative;
	}
	.aui-loading.aui-loading-button .aui-loading-msg{
		height: 20px;
		line-height: 20px;
		font-size: 13px;
		margin-left: 5px;
		display: inline-block;
		vertical-align: top;
		position: relative;
		top: 1px;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span{
		width: -webkit-calc(100% - 6px);
		width: calc(100% - 6px);
		height: 2px;
		display: inline-block;
		border-radius: 2px;
		box-sizing: initial !important;
		position: absolute;
		top: -webkit-calc(50% - 1px);
		top: calc(50% - 1px);
		left: 0;
		opacity: 0.3;
		-ms-animation: load-button 0.6s ease infinite;
		-webkit-animation: load-button 0.6s ease infinite;
		animation: load-button 0.6s ease infinite;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(1){
		border-left: 5px solid #909090;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-ms-animation-delay: 0.05s;
		-webkit-animation-delay: 0.05s;
		animation-delay: 0.05s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(2){
		border-left: 5px solid #909090;
		-ms-transform: rotate(30deg);
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
		-ms-animation-delay: 0.1s;
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(3){
		border-left: 5px solid #909090;
		-ms-transform: rotate(60deg);
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
		-ms-animation-delay: 0.15s;
		-webkit-animation-delay: 0.15s;
		animation-delay: 0.15s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(4){
		border-left: 5px solid #909090;
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		-ms-animation-delay: 0.2s;
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(5){
		border-left: 5px solid #909090;
		-ms-transform: rotate(120deg);
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg);
		-ms-animation-delay: 0.25s;
		-webkit-animation-delay: 0.25s;
		animation-delay: 0.25s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(6){
		border-left: 5px solid #909090;
		-ms-transform: rotate(150deg);
		-webkit-transform: rotate(150deg);
		transform: rotate(150deg);
		-ms-animation-delay: 0.3s;
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(7){
		border-right: 5px solid #909090;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-ms-animation-delay: 0.35s;
		-webkit-animation-delay: 0.35s;
		animation-delay: 0.35s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(8){
		border-right: 5px solid #909090;
		-ms-transform: rotate(30deg);
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
		-ms-animation-delay: 0.4s;
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(9){
		border-right: 5px solid #909090;
		-ms-transform: rotate(60deg);
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
		-ms-animation-delay: 0.45s;
		-webkit-animation-delay: 0.45s;
		animation-delay: 0.45s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(10){
		border-right: 5px solid #909090;
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		-ms-animation-delay: 0.5s;
		-webkit-animation-delay: 0.5s;
		animation-delay: 0.5s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(11){
		border-right: 5px solid #909090;
		-ms-transform: rotate(120deg);
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg);
		-ms-animation-delay: 0.55s;
		-webkit-animation-delay: 0.55s;
		animation-delay: 0.55s;
	}
	.aui-loading.aui-loading-button .aui-loading-animate .span:nth-child(12){
		border-right: 5px solid #909090;
		-ms-transform: rotate(150deg);
		-webkit-transform: rotate(150deg);
		transform: rotate(150deg);
		-ms-animation-delay: 0.6s;
		-webkit-animation-delay: 0.6s;
		animation-delay: 0.6s;
	}
	/* loading-squarefour 样式设置 */
	.aui-loading.aui-loading-squarefour{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.aui-loading.aui-loading-squarefour .aui-loading-main{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 996;
		background: #FFF;
		-ms-animation: aui-fade-in .2s ease-out forwards;
		-webkit-animation: aui-fade-in .2s ease-out forwards;
		animation: aui-fade-in .2s ease-out forwards;
	}
	.aui-loading.aui-loading-squarefour .aui-loading-animate{
		width: 30px;
		height: 30px;
		display: block;
		margin: auto;
		position: absolute;
		top: -webkit-calc(50% - 15px);
		top: calc(40% - 25px);
		left: -webkit-calc(50% - 15px);
		left: calc(50% - 15px);
		-ms-animation: aui-loading-squarefour-animate 1s infinite;
		-webkit-animation: aui-loading-squarefour-animate 1s infinite;
		animation: aui-loading-squarefour-animate 1s infinite;
	}
	.aui-loading.aui-loading-squarefour .aui-loading-animate view{
		width: 12px;
		height: 12px;
		display: block;
		border-radius: 2px;
		background: #2cb0b2;
		position: absolute;
	}
	.aui-loading.aui-loading-squarefour .aui-loading-animate .span1{
		background: #8BC34A;
		left: 0px;
		-ms-animation: aui-loading-square-span1-animate 2s linear 0s infinite normal;
		-webkit-animation: aui-loading-square-span1-animate 2s linear 0s infinite normal;
		animation: aui-loading-square-span1-animate 2s linear 0s infinite normal;
	}
	.aui-loading.aui-loading-squarefour .aui-loading-animate .span2{
		background: #F44336;
		right: 0;
		-ms-animation: aui-loading-square-span2-animate 2s linear 0s infinite normal;
		-webkit-animation: aui-loading-square-span2-animate 2s linear 0s infinite normal;
		animation: aui-loading-square-span2-animate 2s linear 0s infinite normal;
	}
	.aui-loading.aui-loading-squarefour .aui-loading-animate .span3{
		background: #FFB74D;
		bottom: 0;
		-ms-animation: aui-loading-square-span3-animate 2s linear 0s infinite normal;
		-webkit-animation: aui-loading-square-span3-animate 2s linear 0s infinite normal;
		animation: aui-loading-square-span3-animate 2s linear 0s infinite normal;
	}
	.aui-loading.aui-loading-squarefour .aui-loading-animate .span4{
		background: #82bcf9;
		right: 0;
		bottom: 0;
		-ms-animation: aui-loading-square-span4-animate 2s linear 0s infinite normal;
		-webkit-animation: aui-loading-square-span4-animate 2s linear 0s infinite normal;
		animation: aui-loading-square-span4-animate 2s linear 0s infinite normal;
	}
	.aui-loading.aui-loading-squarefour .aui-loading-msg{
		width: 100%;
		height: 50px;
		line-height: 60px;
		font-size: 13px;
		color: #909090;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 0;
	}
	.aui-loading.aui-loading-squarefour.aui-loading-squarefour-style-2{
		z-index: 996;
	}
	.aui-loading.aui-loading-squarefour.aui-loading-squarefour-style-1{
		z-index: 999;
	}
	.aui-loading.aui-loading-squarefour.aui-loading-squarefour-style-1 .aui-loading-main{
		width: auto;
		height: auto;
		min-width: 54px;
		min-height: 54px;
		background: rgba(0,0,0,.8);
		border-radius: 10px;
		box-shadow: 0 0 1px rgba(100,100,100,.3) inset;
		padding: 15px;
		box-sizing: border-box;
		top: 50%;
		left: 50%;
		z-index: 999;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.aui-loading.aui-loading-squarefour.aui-loading-squarefour-style-1 .aui-loading-main .aui-loading-animate{
		position: relative;
		top: 0;
		left: 0;
	}
	.aui-loading.aui-loading-squarefour.aui-loading-squarefour-style-1 .aui-loading-main .aui-loading-msg{
		height: 22px;
		line-height: 20px;
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 14px;
		color: #FFF;
		opacity: 0.9;		
		position: relative;
		top: 6px;
		left: 0;
	}
	/* 三平行四边形放大缩小动画放大缩小动画(全屏首次加载过度动画) */
	.aui-loading.aui-loading-dots{background-color: #FFF; height: 100%; width: 100%; position: fixed; z-index: 996; margin-top: 0px; top: 0px;}
	.aui-loading.aui-loading-dots .aui-loading-main{width: 100%;height: 100%;position: relative;}
	.aui-loading.aui-loading-dots .aui-loading-dot-items {position: absolute;left: 50%;top: 50%;height: 60px;width: 120px; text-align: center; margin-top: -30px;margin-left: -60px;}
	.aui-loading.aui-loading-dots .aui-loading-dot-item{width: 10px;height: 10px; background-color: #ec2b45; display: inline-block; margin-right: 6px; margin-top: 20px; border-radius: 2px; -webkit-transform: scale(1) skewX(-30deg); transform: scale(1) skewX(-30deg);}
	.aui-loading.aui-loading-dots .dot_one {background: #197DE0; -webkit-animation: dot_one 1.5s infinite; animation: dot_one 1.5s infinite;}
	.aui-loading.aui-loading-dots .dot_two {background: #2CB0B2; -webkit-animation: dot_two 1.5s infinite; animation: dot_two 1.5s infinite; -webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
	.aui-loading.aui-loading-dots .dot_three {background: #4CD964; margin-right: 0; -webkit-animation: dot_three 1.5s infinite; animation: dot_three 1.5s infinite; -webkit-animation-delay: 0.4s; animation-delay: 0.4s;}
	/* 圆点背景过度动画-微信小程序效果(全屏首次加载过度动画) */
	.aui-loading.aui-loading-dots-opacity{background-color: #FFF; height: 100%; width: 100%; position: fixed; z-index: 996; margin-top: 0px; top: 0px;}
	.aui-loading.aui-loading-dots-opacity .aui-loading-main{width: 100%;height: 100%;position: relative;}
	.aui-loading.aui-loading-dots-opacity .aui-loading-dot-items {position: absolute;left: 50%;top: 50%;height: 60px;width: 80px; text-align: center; margin-top: -30px;margin-left: -40px;}
	.aui-loading.aui-loading-dots-opacity .aui-loading-dot-item{width: 9px;height: 9px; opacity: 1; background-color: #ec2b45; display: inline-block; margin-right: 8px;margin-top: 30px;-moz-border-radius: 50% 50% 50% 50%;-webkit-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;}
	.aui-loading.aui-loading-dots-opacity .dot_one {background: #197DE0;-webkit-animation: dot-opacity 1.5s infinite; animation: dot-opacity 1.5s infinite;}
	.aui-loading.aui-loading-dots-opacity .dot_two {background: #2CB0B2;-webkit-animation: dot-opacity 1.5s infinite; animation: dot-opacity 1.5s infinite; -webkit-animation-delay: 0.25s; animation-delay: 0.25s;}
	.aui-loading.aui-loading-dots-opacity .dot_three {background: #4CD964;margin-right: 0; -webkit-animation: dot-opacity 1.5s infinite; animation: dot-opacity 1.5s infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
	@-webkit-keyframes dot-opacity {
		50% {opacity: 0.1; }
	}
	@keyframes dot-opacity {
		50% {opacity: 0.1; }
	}
	@-webkit-keyframes dot_one {
		75% {-webkit-transform: scale(0) skewX(-30deg); }
	}
	@keyframes dot_one {
		75% {transform: scale(0) skewX(-30deg); -webkit-transform: scale(0) skewX(-30deg);}
	}
	@-webkit-keyframes dot_two {
		 75% {-webkit-transform: scale(0) skewX(-30deg); }
	}
	@keyframes dot_two {
		75% {transform: scale(0) skewX(-30deg); -webkit-transform:  scale(0) skewX(-30deg);}
	}
	@-webkit-keyframes dot_three {
		75% {-webkit-transform: scale(0) skewX(-30deg); }
	}
	@keyframes dot_three {
		75% {transform: scale(0) skewX(-30deg);-webkit-transform: scale(0) skewX(-30deg);} 
	}
	/* loading加载弹窗 load-button 动画 */
	@-ms-keyframes load-button {
		0% {opacity: 1;}
		100% {opacity: 0.3;}
	}
	@-webkit-keyframes load-button {
		0% {opacity: 1;}
		100% {opacity: 0.3;}
	}
	@keyframes load-button {
		0% {opacity: 1;}
		100% {opacity: 0.3;}
	}

	/* loading加载弹窗 aui-loading-squarefour 动画 */
	@-ms-keyframes aui-loading-squarefour-animate{
		0%{-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
		100%{-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
	}
	@-webkit-keyframes aui-loading-squarefour-animate{
		0%{-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
		100%{-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
	}
	@keyframes aui-loading-squarefour-animate{
		0%{-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
		100%{-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
	}
	
	@-ms-keyframes aui-loading-square-span1-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(0, 18px); -webkit-transform: translate(0, 18px); transform: translate(0, 18px);}
		50%{-ms-transform: translate(18px, 18px); -webkit-transform: translate(18px, 18px); transform: translate(18px, 18px);}
		75%{-ms-transform: translate(18px, 0); -webkit-transform: translate(18px, 0); transform: translate(18px, 0);}
	}
	@-webkit-keyframes aui-loading-square-span1-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(0, 18px); -webkit-transform: translate(0, 18px); transform: translate(0, 18px);}
		50%{-ms-transform: translate(18px, 18px); -webkit-transform: translate(18px, 18px); transform: translate(18px, 18px);}
		75%{-ms-transform: translate(18px, 0); -webkit-transform: translate(18px, 0); transform: translate(18px, 0);}
	}
	@keyframes aui-loading-square-span1-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(0, 18px); -webkit-transform: translate(0, 18px); transform: translate(0, 18px);}
		50%{-ms-transform: translate(18px, 18px); -webkit-transform: translate(18px, 18px); transform: translate(18px, 18px);}
		75%{-ms-transform: translate(18px, 0); -webkit-transform: translate(18px, 0); transform: translate(18px, 0);}
	}
	
	@-ms-keyframes aui-loading-square-span2-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(-18px, 0); -webkit-transform: translate(-18px, 0); transform: translate(-18px, 0);}
		50%{-ms-transform: translate(-18px, 18px); -webkit-transform: translate(-18px, 18px); transform: translate(-18px, 18px);}
		75%{-ms-transform: translate(0, 18px); -webkit-transform: translate(0, 18px); transform: translate(0, 18px);}
	}
	@-webkit-keyframes aui-loading-square-span2-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(-18px, 0); -webkit-transform: translate(-18px, 0); transform: translate(-18px, 0);}
		50%{-ms-transform: translate(-18px, 18px); -webkit-transform: translate(-18px, 18px); transform: translate(-18px, 18px);}
		75%{-ms-transform: translate(0, 18px); -webkit-transform: translate(0, 18px); transform: translate(0, 18px);}
	}
	@keyframes aui-loading-square-span2-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(-18px, 0); -webkit-transform: translate(-18px, 0); transform: translate(-18px, 0);}
		50%{-ms-transform: translate(-18px, 18px); -webkit-transform: translate(-18px, 18px); transform: translate(-18px, 18px);}
		75%{-ms-transform: translate(0, 18px); -webkit-transform: translate(0, 18px); transform: translate(0, 18px);}
	}
	@-ms-keyframes aui-loading-square-span3-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(18px, 0); -webkit-transform: translate(18px, 0); transform: translate(18px, 0);}
		50%{-ms-transform: translate(18px, -18px); -webkit-transform: translate(18px, -18px); transform: translate(18px, -18px);}
		75%{-ms-transform: translate(0, -18px); -webkit-transform: translate(0, -18px); transform: translate(0, -18px);}
	}
	@-webkit-keyframes aui-loading-square-span3-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(18px, 0); -webkit-transform: translate(18px, 0); transform: translate(18px, 0);}
		50%{-ms-transform: translate(18px, -18px); -webkit-transform: translate(18px, -18px); transform: translate(18px, -18px);}
		75%{-ms-transform: translate(0, -18px); -webkit-transform: translate(0, -18px); transform: translate(0, -18px);}
	}
	@keyframes aui-loading-square-span3-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(18px, 0); -webkit-transform: translate(18px, 0); transform: translate(18px, 0);}
		50%{-ms-transform: translate(18px, -18px); -webkit-transform: translate(18px, -18px); transform: translate(18px, -18px);}
		75%{-ms-transform: translate(0, -18px); -webkit-transform: translate(0, -18px); transform: translate(0, -18px);}
	}
	@-ms-keyframes aui-loading-square-span4-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(0, -18px); -webkit-transform: translate(0, -18px); transform: translate(0, -18px);}
		50%{-ms-transform: translate(-18px, -18px); -webkit-transform: translate(-18px, -18px); transform: translate(-18px, -18px);}
		75%{-ms-transform: translate(-18px, 0); -webkit-transform: translate(-18px, 0); transform: translate(-18px, 0);}
	}
	@-webkit-keyframes aui-loading-square-span4-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(0, -18px); -webkit-transform: translate(0, -18px); transform: translate(0, -18px);}
		50%{-ms-transform: translate(-18px, -18px); -webkit-transform: translate(-18px, -18px); transform: translate(-18px, -18px);}
		75%{-ms-transform: translate(-18px, 0); -webkit-transform: translate(-18px, 0); transform: translate(-18px, 0);}
	}
	@keyframes aui-loading-square-span4-animate{
		0%{-ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
		25%{-ms-transform: translate(0, -18px); -webkit-transform: translate(0, -18px); transform: translate(0, -18px);}
		50%{-ms-transform: translate(-18px, -18px); -webkit-transform: translate(-18px, -18px); transform: translate(-18px, -18px);}
		75%{-ms-transform: translate(-18px, 0); -webkit-transform: translate(-18px, 0); transform: translate(-18px, 0);}
	}
</style>