<template>
	<div v-if="show" class="cu-loadding bg-gradual-pink">
		<view class="box">
			<view class="spinner">
				<view class="double-bounce1"></view>
				<view class="double-bounce2"></view>
			</view>
			<view class="text--center text-sm">加载中...</view>
		</view>
	</div>
</template>

<script>
	export default{
		props:{
		  show:{
			  type:Boolean,default:()=>true
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.cu-loadding{
		position: fixed;
		z-index: 10000;
		top:0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.spinner {
		  width: 40px;
		  height: 40px;
		  position: relative;
		  margin: 20rpx auto;
		  .double-bounce1, .double-bounce2 {
		    width: 100%;
		    height: 100%;
		    border-radius: 50%;
		    background-color: #fff;
		    opacity: 0.6;
		    position: absolute;
		    top: 0;
		    left: 0;
		    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
		    animation: sk-bounce 2.0s infinite ease-in-out;
		  }
		  .double-bounce2 {
		    -webkit-animation-delay: -1.0s;
		    animation-delay: -1.0s;
		  }
		}
		
		
	}
	
	@-webkit-keyframes sk-bounce {
	  0%, 100% { -webkit-transform: scale(0.0) }
	  50% { -webkit-transform: scale(1.0) }
	}
	
	@keyframes sk-bounce {
	  0%, 100% { 
	    transform: scale(0.0);
	    -webkit-transform: scale(0.0);
	  } 50% { 
	    transform: scale(1.0);
	    -webkit-transform: scale(1.0);
	  }
	}
</style>
