uav-uniapp-demo-24-8-18/components/pageInit/loading.vue

<!-- 加载动画页面 -->
<template>
	<view v-if="loading" class="loading">
		<div class="loader"></div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num : 4,		//默认2秒后关闭(这里处理初始页面重叠的bug,初始页面是2秒后消失，所以这里加个2)
				interval : null
			}
		},
		created(){
			this.interval = setInterval(() => {
				if(this.num <= 0){
					this.num = 4;
					this.$emit('close');
					clearInterval(this.interval)
				}
				this.num--;
			},1000)
		},
		destroyed(){
			if(this.interval){
				clearInterval(this.interval)
			}
		},
		props : {
			loading : {
				type : Boolean,
				default : true
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.loading {
		display: flex;
		justify-content: center;
		
		.loader {
			width: 50px;
			aspect-ratio: 1;
			display: grid;
		}

		.loader::before,
		.loader::after {
			content: "";
			grid-area: 1/1;
			--c: no-repeat radial-gradient(farthest-side, #B0C73B 92%, #0000);
			background:
				var(--c) 50% 0,
				var(--c) 50% 100%,
				var(--c) 100% 50%,
				var(--c) 0 50%;
			background-size: 12px 12px;
			animation: l12 1s infinite;
		}

		.loader::before {
			margin: 4px;
			filter: hue-rotate(45deg);
			background-size: 8px 8px;
			animation-timing-function: linear
		}

		@keyframes l12 {
			100% {
				transform: rotate(.5turn)
			}
		}
	}
</style>