CSS 不同颜色的小圆角方块组成的旋转加载动画

<template>
	<!-- 创建一个装载自定义旋转加载动画的容器 -->
	<view class="spinner">
		<!-- 定义外部包裹容器，用于实现整体旋转动画 -->
		<view class="outer">
			<!-- 定义四个内部小方块以形成十字形结构 -->
			<view class="inner tl"></view> <!-- 左上角 -->
			<view class="inner tr"></view> <!-- 右上角 -->
			<view class="inner br"></view> <!-- 右下角 -->
			<view class="inner bl"></view> <!-- 左下角 -->
		</view>
	</view>
</template>
 
<script>
	
</script>
 
<style>
	/* 设置页面背景颜色为深灰色 */
	body {
		background-color: #212121;
	}
 
	/* 设置旋转加载动画容器样式 */
	.spinner {
		position: absolute;
		/* 绝对定位，使其能居中显示 */
		width: 128px;
		/* 设置宽度 */
		height: 128px;
		/* 设置高度 */
		top: calc(50% - 64px);
		/* 上边距计算