fs-uni-template/pages/index/welcome.vue

<template>
	<view class="wrapper">
		<view class="circle"></view>
		<view class="circle"></view>
		<view class="circle"></view>
		<view class="shadow"></view>
		<view class="shadow"></view>
		<view class="shadow"></view>
		<text>加载中...</text>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'

const store = useStore()

onLoad(() => {
	store.dispatch('loginByCode').finally(() => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	})
})
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.wrapper{
		width:200px;
		height:60px;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%, -50%);
	}
	.circle {
		width: 20px;
		height: 20px;
		position: absolute;
		border-radius: 50%;
		background-color: var(--primary);
		left: 15%;
		transform-origin: 50%;
		animation: circle .5s alternate infinite ease;
	}

	@keyframes circle {
		0% {
			top: 60px;
			height: 5px;
			border-radius: 50px 50px 25px 25px;
			transform: scaleX(1.7);
		}

		40% {
			height: 20px;
			border-radius: 50%;
			transform: scaleX(1);
		}

		100% {
			top: 0%;
		}
	}

	.circle:nth-child(2) {
		left: 45%;
		animation-delay: .2s;
	}

	.circle:nth-child(3) {
		left: auto;
		right: 15%;
		animation-delay: .3s;
	}

	.shadow {
		width: 20px;
		height: 4px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		top: 62px;
		transform-origin: 50%;
		z-index: -1;
		left: 15%;
		filter: blur(1px);
		animation: shadow .5s alternate infinite ease;
	}

	@keyframes shadow {
		0% {
			transform: scaleX(1.5);
		}

		40% {
			transform: scaleX(1);
			opacity: .7;
		}

		100% {
			transform: scaleX(.2);
			opacity: .4;
		}
	}

	.shadow:nth-child(4) {
		left: 45%;
		animation-delay: .2s
	}

	.shadow:nth-child(5) {
		left: auto;
		right: 15%;
		animation-delay: .3s;
	}

	text {
		position: absolute;
		top: 75px;
		font-family: 'Lato';
		font-size: 18px;
		letter-spacing: 12px;
		color: var(--primary);
		left: 15%;
	}
</style>