uav-uniapp-demo-24-8-18/components/luckyAnimation/luckyAnimation.vue

<!-- 抽奖动画 -->
<template>
	<view v-if="show" class="luckyAnimation">
		<div class="loader"></div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num : 1,
				show : false
			}
		},
		destroyed() {
			if (this.interval) {
				clearInterval(this.interval);
			}
		},
		methods: {
			start() {
				this.show = true;
				this.num = 1;
				this.interval = setInterval(() => {
					if (this.num <= 0) {
						this.show = false
						this.$emit('close')
						clearInterval(this.interval);
					}
					this.num--;
				}, 500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.luckyAnimation {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 100%;
		z-index: 200;
		
		.loader {
			height: 15px;
			aspect-ratio: 4;
			--_g: no-repeat radial-gradient(farthest-side, #000, 90%, #0000);
			background:
				var(--_g) left,
				var(--_g) right;
			background-size: 25% 100%;
			display: grid;
		}

		.loader:before,
		.loader:after {
			content: "";
			height: inherit;
			aspect-ratio: 1;
			grid-area: 1/1;
			margin: auto;
			border-radius: 50%;
			transform-origin: -100% 50%;
			background: #fff;
			animation: l49 1s infinite linear;
		}

		.loader:after {
			transform-origin: 200% 50%;
			--s: -1;
			animation-delay: -.5s;
		}

		@keyframes l49 {

			58%,
			100% {
				transform: rotate(calc(var(--s, 1)*1turn))
			}
		}
	}
</style>