fix: restore runner loading
This commit is contained in:
170-carry
parent
9b17737ca8
commit
b32628de5c
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||
<title>Host Center</title>
|
||||
<link rel="stylesheet" href="./style.css?v=20260428-2060" />
|
||||
<link rel="stylesheet" href="./style.css?v=20260428-2085" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="host-center" aria-label="Host Center" data-i18n-aria="page_label" data-loading="true" data-view="loading">
|
||||
@ -126,22 +126,14 @@
|
||||
|
||||
<div class="home-indicator" aria-hidden="true"></div>
|
||||
<div class="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true">
|
||||
<div class="loading-eagle" aria-hidden="true">
|
||||
<svg class="stick-eagle-svg" viewBox="0 0 220 150" focusable="false">
|
||||
<ellipse class="stick-eagle-shadow" cx="110" cy="128" rx="52" ry="8"></ellipse>
|
||||
<g class="stick-eagle-flight">
|
||||
<path class="stick-eagle-wing stick-eagle-wing-left" d="M104 72C80 38 43 18 15 30c24 10 44 25 61 48-22-5-44 0-62 17 33 12 65 8 92-13"></path>
|
||||
<path class="stick-eagle-wing stick-eagle-wing-right" d="M116 72c24-34 61-54 89-42-24 10-44 25-61 48 22-5 44 0 62 17-33 12-65 8-92-13"></path>
|
||||
<path class="stick-eagle-feather stick-eagle-feather-left" d="M38 37c18 11 33 25 45 43M54 74c14 0 28-3 42-11M26 93c21 2 42-1 63-10"></path>
|
||||
<path class="stick-eagle-feather stick-eagle-feather-right" d="M182 37c-18 11-33 25-45 43M166 74c-14 0-28-3-42-11M194 93c-21 2-42-1-63-10"></path>
|
||||
<path class="stick-eagle-body" d="M91 67c9-21 29-21 38 0 7 21-4 39-19 39S84 88 91 67Z"></path>
|
||||
<path class="stick-eagle-chest" d="M99 76c5 9 17 9 22 0"></path>
|
||||
<path class="stick-eagle-tail" d="M99 101 84 120M110 106v26M121 101l15 19"></path>
|
||||
<path class="stick-eagle-head" d="M101 46c7-12 25-13 34-3 8 9 5 25-9 31-12 5-27-2-29-16l-15-7 18-1"></path>
|
||||
<path class="stick-eagle-beak" d="M135 51h28l-24 11"></path>
|
||||
<circle class="stick-eagle-eye" cx="123" cy="48" r="2.8"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="runner-stick" aria-hidden="true">
|
||||
<span class="runner-head"></span>
|
||||
<span class="runner-body"></span>
|
||||
<span class="runner-arm runner-arm-front"></span>
|
||||
<span class="runner-arm runner-arm-back"></span>
|
||||
<span class="runner-leg runner-leg-front"></span>
|
||||
<span class="runner-leg runner-leg-back"></span>
|
||||
<span class="runner-ground"></span>
|
||||
</div>
|
||||
<div class="loading-copy">loading....</div>
|
||||
</div>
|
||||
|
||||
@ -81,81 +81,103 @@ a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-eagle {
|
||||
.runner-stick {
|
||||
position: relative;
|
||||
width: 196px;
|
||||
height: 132px;
|
||||
animation: eagle-glide 1s ease-in-out infinite;
|
||||
width: 92px;
|
||||
height: 82px;
|
||||
color: #1ecf70;
|
||||
filter: drop-shadow(0 8px 14px rgba(30, 207, 112, 0.22));
|
||||
animation: runner-bob 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.stick-eagle-svg {
|
||||
.runner-head,
|
||||
.runner-body,
|
||||
.runner-arm,
|
||||
.runner-leg,
|
||||
.runner-ground {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
filter: drop-shadow(0 12px 18px rgba(20, 176, 96, 0.2));
|
||||
}
|
||||
|
||||
.stick-eagle-shadow {
|
||||
fill: rgba(20, 176, 96, 0.16);
|
||||
transform-origin: 110px 128px;
|
||||
animation: stick-eagle-shadow 1s ease-in-out infinite;
|
||||
.runner-head {
|
||||
top: 5px;
|
||||
left: 39px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 4px solid currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.stick-eagle-flight {
|
||||
transform-origin: 110px 76px;
|
||||
animation: stick-eagle-flight 0.66s ease-in-out infinite;
|
||||
.runner-body {
|
||||
top: 26px;
|
||||
left: 47px;
|
||||
width: 5px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
transform-origin: 50% 3px;
|
||||
animation: runner-body 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.stick-eagle-wing,
|
||||
.stick-eagle-feather,
|
||||
.stick-eagle-body,
|
||||
.stick-eagle-chest,
|
||||
.stick-eagle-tail,
|
||||
.stick-eagle-head,
|
||||
.stick-eagle-beak {
|
||||
fill: none;
|
||||
stroke: #1ecf70;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 6;
|
||||
.runner-arm,
|
||||
.runner-leg {
|
||||
left: 47px;
|
||||
width: 5px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
transform-origin: 50% 2px;
|
||||
}
|
||||
|
||||
.stick-eagle-wing,
|
||||
.stick-eagle-feather {
|
||||
transform-box: fill-box;
|
||||
.runner-arm {
|
||||
top: 31px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.stick-eagle-wing-left,
|
||||
.stick-eagle-feather-left {
|
||||
transform-origin: 94% 70%;
|
||||
animation: stick-eagle-left-wing 0.66s ease-in-out infinite;
|
||||
.runner-arm-front {
|
||||
animation: runner-arm-front 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.stick-eagle-wing-right,
|
||||
.stick-eagle-feather-right {
|
||||
transform-origin: 6% 70%;
|
||||
animation: stick-eagle-right-wing 0.66s ease-in-out infinite;
|
||||
.runner-arm-back {
|
||||
animation: runner-arm-back 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.stick-eagle-feather {
|
||||
opacity: 0.55;
|
||||
stroke-width: 4;
|
||||
.runner-leg {
|
||||
top: 51px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.stick-eagle-body,
|
||||
.stick-eagle-head {
|
||||
stroke-width: 5.5;
|
||||
.runner-leg-front {
|
||||
animation: runner-leg-front 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.stick-eagle-chest,
|
||||
.stick-eagle-tail,
|
||||
.stick-eagle-beak {
|
||||
stroke-width: 5;
|
||||
.runner-leg-back {
|
||||
animation: runner-leg-back 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.stick-eagle-eye {
|
||||
fill: #08723f;
|
||||
.runner-ground {
|
||||
right: 6px;
|
||||
bottom: 2px;
|
||||
width: 70px;
|
||||
height: 4px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(30, 207, 112, 0.18);
|
||||
}
|
||||
|
||||
.runner-ground::before,
|
||||
.runner-ground::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 24px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
animation: runner-ground 0.6s linear infinite;
|
||||
}
|
||||
|
||||
.runner-ground::after {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.loading-copy {
|
||||
@ -737,55 +759,72 @@ a {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@keyframes eagle-glide {
|
||||
@keyframes runner-bob {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-7px);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stick-eagle-flight {
|
||||
@keyframes runner-body {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(-1deg);
|
||||
transform: rotate(-7deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(3px) rotate(1deg);
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stick-eagle-left-wing {
|
||||
@keyframes runner-arm-front {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-4deg) translateY(0);
|
||||
transform: rotate(62deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(16deg) translateY(10px);
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stick-eagle-right-wing {
|
||||
@keyframes runner-arm-back {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(4deg) translateY(0);
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-16deg) translateY(10px);
|
||||
transform: rotate(62deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stick-eagle-shadow {
|
||||
@keyframes runner-leg-front {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.45;
|
||||
transform: scaleX(0.82);
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.75;
|
||||
transform: scaleX(1);
|
||||
transform: rotate(54deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-leg-back {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(54deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-ground {
|
||||
0% {
|
||||
transform: translateX(78px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user