<template>
	<view class="loader-all" v-if="show">
		<view class="loader"></view>
	</view>
</template>

<script>
	export default {
		props:{
			show:{
				type:Boolean,
				default: false
			}
		},
		data() {
			return {
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@keyframes animloader {
	  17% {
	    border-bottom-right-radius: 3px;
	  }
	  25% {
	    transform: translateY(9px) rotate(22.5deg);
	  }
	  50% {
	    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
	    border-bottom-right-radius: 40px;
	  }
	  75% {
	    transform: translateY(9px) rotate(67.5deg);
	  }
	  100% {
	    transform: translateY(0) rotate(90deg);
	  }
	}
	
	@keyframes animloaders {
	  0%,
	  100% {
	    transform: scale(1, 1);
	  }
	  50% {
	    transform: scale(1.2, 1);
	  }
	}
	
	.loader-all{
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 1);
		z-index: 9999;
	}
	
	.loader {
	  position: relative;
	  margin-top: -200rpx;
	  width: 48px;
	  height: 48px;
	
	  /**
	   * 阴影层
	   */
	  &::before {
	    content: "";
	    position: absolute;
	    top: calc(100% + 15px);
	    left: 0;
	    width: 100%;
	    height: 5px;
	    border-radius: 50%;
	    background: #00afee;
	    opacity: 0.1;
	    animation: animloaders .5s linear infinite;
	  }
	
	  &::after {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    border-radius: 3px;
	    background: linear-gradient( 80deg, #4BACFF 0%, rgba(75, 174, 255,0.5) 100%);
	    animation: animloader .5s linear infinite;
	  }
	}
</style>
