<template>
	<view class="loading-page">
		<view class="loader"></view>
		<text class="text">加载中...</text>
	</view>
</template>

<script setup></script>

<style scoped lang="scss">
.loading-page {
	width: 100%;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 10vh;
	--color: #111;
	.text {
		font-size: 24upx;
		color: var(--color);
	}
	.loader {
		width: 40px;
		height: 20px;
		--c: no-repeat radial-gradient(farthest-side, var(--color) 93%, var(--color));
		background: var(--c) 0 0, var(--c) 50% 0;
		background-size: 8px 8px;
		position: relative;
		clip-path: inset(-200% -100% 0 0);
		animation: l6-0 1.5s linear infinite;
	}
	.loader:before {
		content: '';
		position: absolute;
		width: 8px;
		height: 12px;
		background: var(--color);
		left: -16px;
		top: 0;
		animation: l6-1 1.5s linear infinite, l6-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
	}
	.loader:after {
		content: '';
		position: absolute;
		inset: 0 0 auto auto;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--color);
		animation: l6-3 1.5s linear infinite;
	}
	@keyframes l6-0 {
		0%,
		30% {
			background-position: 0 0, 50% 0;
		}
		33% {
			background-position: 0 100%, 50% 0;
		}
		41%,
		63% {
			background-position: 0 0, 50% 0;
		}
		66% {
			background-position: 0 0, 50% 100%;
		}
		74%,
		100% {
			background-position: 0 0, 50% 0;
		}
	}
	@keyframes l6-1 {
		90% {
			transform: translateY(0);
		}
		95% {
			transform: translateY(15px);
		}
		100% {
			transform: translateY(15px);
			left: calc(100% - 8px);
		}
	}
	@keyframes l6-2 {
		100% {
			top: -0.1px;
		}
	}
	@keyframes l6-3 {
		0%,
		80%,
		100% {
			transform: translate(0);
		}
		90% {
			transform: translate(26px);
		}
	}
}
</style>
