<template>
<!-- 定义一个视图容器,用于装载SVG加载动画 -->
<view class="loader">
<!-- SVG图形元素,定义一个240x240的可视区域 -->
<svg class="pl" width="240" height="240" viewBox="0 0 240 240">
<!-- 圆环A,作为动画的一部分 -->
<circle class="pl__ring pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000" stroke-width="20"
stroke-dasharray="0 660" stroke-dashoffset="-330" stroke-linecap="round"></circle>
<!-- 圆环B,具有不同的颜色和独立的动画效果 -->
<circle class="pl__ring pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000" stroke-width="20"
stroke-dasharray="0 220" stroke-dashoffset="-110" stroke-linecap="round"></circle>
<!-- 圆环C,同样有独特的颜色和动画 -->
<circle class="pl__ring pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20"
stroke-dasharray="0 440" stroke-linecap="round"></circle>
<!-- 圆环D,与圆环C相似但位置不同 -->
<circle class="pl__ring pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20"
stroke-dasharray="0 440" stroke-linecap="round"></circle>
</svg>
</view>
</template>
<script>
// (此处暂无脚本内容)
</script>
<style>
/* 设置整个页面背景为深灰色 */
body {
background-color: #212121;
}
/* 设置加载动画容器样式,使其在页面上垂直居中并对齐水平中心 */
.loader {
margin-top: 350px;
/* 垂直居中偏移量 */
margin-left: 40%;
/* 水平居中偏移量 */
}
/* 缩小SVG元素尺寸以便适应布局 */
.pl {
width: 6em;
height: 6em;
}
/* 定义所有圆环的基本动画类名 */
.pl__ring {
animation: ringA 2s linear infinite;
/* 初始设置为使用ringA动画 */
}
/* 为圆环A定义特定的颜色和动画 */
.pl__ring--a {
stroke: #f42f25;
/* 设置圆环A的颜色 */
}
/* 为圆环B定义颜色及自定义动画keyframes */
.pl__ring--b {
animation-name: ringB;
/* 使用名为ringB的动画 */
stroke: #f49725;
/* 设置圆环B的颜色 */
}
/* 为圆环C定义颜色及自定义动画keyframes */
.pl__ring--c {
animation-name: ringC;
/* 使用名为ringC的动画 */
stroke: #255ff4;
/* 设置圆环C的颜色 */
}
/* 为圆环D定义颜色及自定义动画keyframes */
.pl__ring--d {
animation-name: ringD;
/* 使用名为ringD的动画 */
stroke: #f42582;
/* 设置圆环D的颜色 */
}
/* 定义ringA动画的关键帧 */
@keyframes ringA {
from,
4% {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -330;
}
12% {
stroke-dasharray: 60 600;
stroke-width: 30;
stroke-dashoffset: -335;
}
32% {
stroke-dasharray: 60 600;
stroke-width: 30;
stroke-dashoffset: -595;
}
40%,
54% {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -660;
}
62% {
stroke-dasharray: 60 600;
stroke-width: 30;
stroke-dashoffset: -665;
}
82% {
stroke-dasharray: 60 600;
stroke-width: 30;
stroke-dashoffset: -925;
}
90%,
to {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -990;
}
}
/* 类似地,为ringB、ringC和ringD分别定义关键帧动画 */
@keyframes ringB {
from,
12% {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -110;
}
20% {
stroke-dasharray: 20 200;
stroke-width: 30;
stroke-dashoffset: -115;
}
40% {
stroke-dasharray: 20 200;
stroke-width: 30;
stroke-dashoffset: -195;
}
48%,
62% {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -220;
}
70% {
stroke-dasharray: 20 200;
stroke-width: 30;
stroke-dashoffset: -225;
}
90% {
stroke-dasharray: 20 200;
stroke-width: 30;
stroke-dashoffset: -305;
}
98%,
to {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -330;
}
}
@keyframes ringC {
from {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: 0;
}
8% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -5;
}
28% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -175;
}
36%,
58% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -220;
}
66% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -225;
}
86% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -395;
}
94%,
to {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -440;
}
}
@keyframes ringD {
from,
8% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: 0;
}
16% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -5;
}
36% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -175;
}
44%,
50% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -220;
}
58% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -225;
}
78% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -395;
}
86%,
to {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -440;
}
}
</style>
12-17
1575

08-22
356

08-07
690

04-06
580
