<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);
/* 上边距计算