cberpapp/components/loading/loading.vue

<template>
	<view>
		<view class="loading">
		    <view class="dot white"></view>
		    <view class="dot" :class="bg1"></view>
		    <view class="dot" :class="bg2"></view>
		    <view class="dot" :class="bg3"></view>
		    <view class="dot" :class="bg4"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"loading",
		props:{
			bg1:{
				type:String,
				default:'bg-red',
			},
			bg2:{
				type:String,
				default:'bg-yellow',
			},
			bg3:{
				type:String,
				default:'bg-olive',
			},
			bg4:{
				type:String,
				default:'bg-cyan',
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	.loading {
	  position: fixed;
	  margin: auto;
	  top: 0; bottom: 0; left: 0; right: 0;
	  width: 6.250em; height: 6.250em;
	  animation: rotate 2.4s linear infinite;
	  z-index: 999;
	}
	.white { 
	  top: 0; bottom: 0; left: 0; right: 0; 
	  background: white; 
	  animation: flash 2.4s linear infinite;
	  opacity: 0;
	}
	.dot {
	  position: absolute;
	  margin: auto;
	  width: 2.4em; height: 2.4em;
	  border-radius: 100%;
	  transition: all 1s ease;
	}
	.dot:nth-child(2) { top: 0; bottom: 0; left: 0;  	animation: dotsY 2.4s linear infinite; }
	.dot:nth-child(3) { left: 0; right: 0; top: 0;  	animation: dotsX 2.4s linear infinite; }
	.dot:nth-child(4) { top: 0; bottom: 0; right: 0;  	animation: dotsY 2.4s linear infinite; }
	.dot:nth-child(5) { left: 0; right: 0; bottom: 0; 	animation: dotsX 2.4s linear infinite; }
	
	@keyframes rotate {
	  0% { transform: rotate( 0 ); }
	  10% { width: 6.250em; height: 6.250em; }
	  66% { width: 2.4em; height: 2.4em; }
	  100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
	}
	
	@keyframes dotsY {
	  66% { opacity: .1; width: 2.4em; }
	  77%{ opacity: 1; width: 0; }
	}
	@keyframes dotsX {
	  66% { opacity: .1; height: 2.4em;}
	  77%{ opacity: 1; height: 0; }
	}
	
	@keyframes flash {
	  33% { opacity: 0; border-radius: 0%; }
	  55%{ opacity: .6; border-radius: 100%; }
	  66%{ opacity: 0; }
	}
</style>