fix: draw stick eagle loading
This commit is contained in:
170-carry
parent
04ec78840a
commit
17ef7cb4bb
@ -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-2045" />
|
||||
<link rel="stylesheet" href="./style.css?v=20260428-2060" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="host-center" aria-label="Host Center" data-i18n-aria="page_label" data-loading="true" data-view="loading">
|
||||
@ -127,23 +127,25 @@
|
||||
<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="eagle-svg" viewBox="0 0 176 110" focusable="false">
|
||||
<ellipse class="eagle-shadow" cx="88" cy="96" rx="42" ry="5"></ellipse>
|
||||
<g class="eagle-fly">
|
||||
<path class="eagle-wing eagle-wing-left" d="M82 50C63 26 31 12 9 21c19 10 35 22 48 38-17-5-34-3-49 8 31 13 56 10 78-2Z"></path>
|
||||
<path class="eagle-wing eagle-wing-right" d="M94 50c19-24 51-38 73-29-19 10-35 22-48 38 17-5 34-3 49 8-31 13-56 10-78-2Z"></path>
|
||||
<path class="eagle-tail" d="M78 62 63 78l22-6 3 20 3-20 22 6-15-16Z"></path>
|
||||
<path class="eagle-body" d="M65 53c9-17 37-17 46 0 8 16-3 29-23 29S57 69 65 53Z"></path>
|
||||
<path class="eagle-chest" d="M76 58c5 8 19 8 24 0 0 10-4 17-12 17s-12-7-12-17Z"></path>
|
||||
<circle class="eagle-head" cx="88" cy="38" r="14"></circle>
|
||||
<path class="eagle-beak" d="M100 39h16l-15 8Z"></path>
|
||||
<circle class="eagle-eye" cx="94" cy="35" r="2"></circle>
|
||||
<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>
|
||||
<div class="loading-copy">loading....</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js?v=20260428-2045" defer></script>
|
||||
<script src="./script.js?v=20260428-2060" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -214,7 +214,7 @@
|
||||
if (window.location.protocol === "file:") return fallbackMessages[normalizedLang];
|
||||
|
||||
try {
|
||||
const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2045`, { cache: "no-store" });
|
||||
const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2060`, { cache: "no-store" });
|
||||
if (response.ok) return await response.json();
|
||||
} catch (error) {
|
||||
return fallbackMessages[normalizedLang];
|
||||
|
||||
@ -82,64 +82,80 @@ a {
|
||||
}
|
||||
|
||||
.loading-eagle {
|
||||
width: 158px;
|
||||
height: 106px;
|
||||
color: #1ecf70;
|
||||
filter: drop-shadow(0 10px 18px rgba(30, 207, 112, 0.24));
|
||||
position: relative;
|
||||
width: 196px;
|
||||
height: 132px;
|
||||
animation: eagle-glide 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.eagle-svg {
|
||||
.stick-eagle-svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
filter: drop-shadow(0 12px 18px rgba(20, 176, 96, 0.2));
|
||||
}
|
||||
|
||||
.eagle-shadow {
|
||||
fill: rgba(30, 207, 112, 0.16);
|
||||
animation: eagle-shadow 1s ease-in-out infinite;
|
||||
.stick-eagle-shadow {
|
||||
fill: rgba(20, 176, 96, 0.16);
|
||||
transform-origin: 110px 128px;
|
||||
animation: stick-eagle-shadow 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.eagle-fly {
|
||||
transform-origin: 88px 57px;
|
||||
animation: eagle-fly 0.58s ease-in-out infinite;
|
||||
.stick-eagle-flight {
|
||||
transform-origin: 110px 76px;
|
||||
animation: stick-eagle-flight 0.66s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.eagle-wing {
|
||||
fill: currentColor;
|
||||
.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;
|
||||
}
|
||||
|
||||
.stick-eagle-wing,
|
||||
.stick-eagle-feather {
|
||||
transform-box: fill-box;
|
||||
}
|
||||
|
||||
.eagle-wing-left {
|
||||
transform-origin: 92% 62%;
|
||||
animation: eagle-wing-left 0.58s ease-in-out infinite;
|
||||
.stick-eagle-wing-left,
|
||||
.stick-eagle-feather-left {
|
||||
transform-origin: 94% 70%;
|
||||
animation: stick-eagle-left-wing 0.66s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.eagle-wing-right {
|
||||
transform-origin: 8% 62%;
|
||||
animation: eagle-wing-right 0.58s 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;
|
||||
}
|
||||
|
||||
.eagle-tail {
|
||||
fill: #18b85f;
|
||||
.stick-eagle-feather {
|
||||
opacity: 0.55;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.eagle-body,
|
||||
.eagle-head {
|
||||
fill: #22cf72;
|
||||
.stick-eagle-body,
|
||||
.stick-eagle-head {
|
||||
stroke-width: 5.5;
|
||||
}
|
||||
|
||||
.eagle-chest {
|
||||
fill: #baf8d4;
|
||||
.stick-eagle-chest,
|
||||
.stick-eagle-tail,
|
||||
.stick-eagle-beak {
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
.eagle-beak {
|
||||
fill: #128f50;
|
||||
}
|
||||
|
||||
.eagle-eye {
|
||||
fill: #07502a;
|
||||
.stick-eagle-eye {
|
||||
fill: #08723f;
|
||||
}
|
||||
|
||||
.loading-copy {
|
||||
@ -731,37 +747,37 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eagle-fly {
|
||||
@keyframes stick-eagle-flight {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(-3px) rotate(-2deg);
|
||||
transform: translateY(0) rotate(-1deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(3px) rotate(2deg);
|
||||
transform: translateY(3px) rotate(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eagle-wing-left {
|
||||
@keyframes stick-eagle-left-wing {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(12deg) translateY(0);
|
||||
transform: rotate(-4deg) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-22deg) translateY(9px);
|
||||
transform: rotate(16deg) translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eagle-wing-right {
|
||||
@keyframes stick-eagle-right-wing {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-12deg) translateY(0);
|
||||
transform: rotate(4deg) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(22deg) translateY(9px);
|
||||
transform: rotate(-16deg) translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eagle-shadow {
|
||||
@keyframes stick-eagle-shadow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.45;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user