dreamland/lib/pageLoading.vue

<template name="pageLoading">
	<view class="pageLoading" v-if="pageLoading"  @tap.stop="stopFun" @touchmove.stop="stopFun">
		<view class="loader">
			<view class="loader-inner ball-scale-multiple">
				<view></view>
				<view></view>
				<view></view>
				<image src="http://static.youqianzhuan.vip/ll.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="text-center text-hui" style="margin-top: -30rpx;">页面加载中</view>
	</view>
</template>
<script>
export default {
	name: "pageLoading",
	props: {
		pageLoading: {
			type    : Boolean,
			default : false
		},
	},
	methods:{
		stopFun : function(){return false;}
	}
}
</script>
<style>

	.pageLoading{width:100%; height:100%; background:#FFFFFF; position:fixed; z-index:99; left:0; top:0; bottom:0;}
	.loader {display:flex;flex:0 1 auto;flex-direction:column;flex-grow:1;flex-shrink:0;flex-basis:60%;max-width:60%;height:500rpx;align-items:center;justify-content:center;}
	.loader image {width:100rpx;height:100rpx;z-index:1000;position:absolute;left:100rpx;top:100rpx;opacity:1;margin:0;width:100rpx;}
	@-webkit-keyframes ball-scale-multiple {0% {-webkit-transform:scale(0);transform:scale(0);opacity:0;}
	5% {opacity:1;}
	100% {-webkit-transform:scale(1);transform:scale(1);opacity:0;}
	}
	@keyframes ball-scale-multiple {0% {-webkit-transform:scale(0);transform:scale(0);opacity:0;}
	5% {opacity:1;}
	100% {-webkit-transform:scale(1);transform:scale(1);opacity:0;}
	}
	.ball-scale-multiple {position:relative;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px);}
	.ball-scale-multiple>view:nth-child(2) {-webkit-animation-delay:0.2s;animation-delay:0.2s;}
	.ball-scale-multiple>view:nth-child(3) {-webkit-animation-delay:0.4s;animation-delay:0.4s;}
	.ball-scale-multiple>view {background-color:#3c64c9;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;left:60rpx;top:60rpx;opacity:0;margin:0;width:180rpx;height:180rpx;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite;}
</style>