CSS 飞舞线条加载中效果

<template>
	<view class="page">
		<view class="container">
			<view class="ring"></view>
			<view class="ring"></view>
			<view class="ring"></view>
			<view class="ring"></view>
			<view class="h3">加载中...</view>
		</view>
	</view>
</template>
 
<script>
</script>
 
<style>
	body {
		background-color: #212121;
		/* 设置背景颜色为深灰色 */
	}
 
	.page {
		display: flex;
		/* 使用弹性布局 */
		justify-content: center;
		/* 水平居中对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		margin-top: 300px;
		/* 顶部外边距为300像素 */
	}
 
	.container {
		display: flex;
		/* 使用弹性布局 */
		justify-content: center;
		/* 水平居中对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		position: relative;
		/*