CSS 左右弹动加载中动画

<template>
	<!-- 定义一个视图容器，类名为box -->
	<view class="box">
		<!-- 定义一个加载器组件 -->
		<div class="loader">
			<!-- 加载器中的文字提示，带有动画效果 -->
			<span class="loader-text">loading</span>
			<!-- 动画加载环形元素 -->
			<span class="load"></span>
		</div>
	</view>
</template>
 
<script>
	export default {
		data() {
			// 初始化数据为空
			return {}
		},
		onLoad() {
			// 页面加载时执行的方法（此处为空）
		},
		methods: {
			// 页面方法区域（此处为空）
		}
	}
</script>
 
<style>
	/* 设置整个页面的背景颜色为深灰色 */
	body {
		background-color: #212121;
	}
 
	/* 设置.box样式，居中显示并设置顶部外边距 */
	.box {
		margin-top: 350px;
		margin-left: 45%;
	}
 
	/* 定义加载器容器的样式 */
	.loader {
		width: 80px;
		height: 50px;
		position: relative