hy/chatapp-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: draw stick eagle loading

Browse Source
This commit is contained in:
170-carry 2026-04-28 20:45:30 +08:00
parent 04ec78840a
commit 17ef7cb4bb
3 changed files with 74 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
h5/hyapp/host-center/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <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" /> <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> <title>Host Center</title>
<link rel="stylesheet" href="./style.css?v=20260428-2045" /> <link rel="stylesheet" href="./style.css?v=20260428-2060" />
</head> </head>
<body> <body>
<div class="host-center" aria-label="Host Center" data-i18n-aria="page_label" data-loading="true" data-view="loading"> <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="home-indicator" aria-hidden="true"></div>
<div class="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true"> <div class="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true">
<div class="loading-eagle" aria-hidden="true"> <div class="loading-eagle" aria-hidden="true">
<svg class="eagle-svg" viewBox="0 0 176 110" focusable="false"> <svg class="stick-eagle-svg" viewBox="0 0 220 150" focusable="false">
<ellipse class="eagle-shadow" cx="88" cy="96" rx="42" ry="5"></ellipse> <ellipse class="stick-eagle-shadow" cx="110" cy="128" rx="52" ry="8"></ellipse>
<g class="eagle-fly"> <g class="stick-eagle-flight">
<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="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="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="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="eagle-tail" d="M78 62 63 78l22-6 3 20 3-20 22 6-15-16Z"></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="eagle-body" d="M65 53c9-17 37-17 46 0 8 16-3 29-23 29S57 69 65 53Z"></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="eagle-chest" d="M76 58c5 8 19 8 24 0 0 10-4 17-12 17s-12-7-12-17Z"></path> <path class="stick-eagle-body" d="M91 67c9-21 29-21 38 0 7 21-4 39-19 39S84 88 91 67Z"></path>
<circle class="eagle-head" cx="88" cy="38" r="14"></circle> <path class="stick-eagle-chest" d="M99 76c5 9 17 9 22 0"></path>
<path class="eagle-beak" d="M100 39h16l-15 8Z"></path> <path class="stick-eagle-tail" d="M99 101 84 120M110 106v26M121 101l15 19"></path>
<circle class="eagle-eye" cx="94" cy="35" r="2"></circle> <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> </g>
</svg> </svg>
</div> </div>
<div class="loading-copy">loading....</div> <div class="loading-copy">loading....</div>
</div> </div>
</div> </div>
<script src="./script.js?v=20260428-2045" defer></script> <script src="./script.js?v=20260428-2060" defer></script>
</body> </body>
</html> </html>

2
h5/hyapp/host-center/script.js
View File

@ -214,7 +214,7 @@
if (window.location.protocol === "file:") return fallbackMessages[normalizedLang]; if (window.location.protocol === "file:") return fallbackMessages[normalizedLang];
try { 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(); if (response.ok) return await response.json();
} catch (error) { } catch (error) {
return fallbackMessages[normalizedLang]; return fallbackMessages[normalizedLang];

100
h5/hyapp/host-center/style.css
View File

@ -82,64 +82,80 @@ a {
} }
.loading-eagle { .loading-eagle {
width: 158px; position: relative;
height: 106px; width: 196px;
color: #1ecf70; height: 132px;
filter: drop-shadow(0 10px 18px rgba(30, 207, 112, 0.24));
animation: eagle-glide 1s ease-in-out infinite; animation: eagle-glide 1s ease-in-out infinite;
} }
.eagle-svg { .stick-eagle-svg {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: visible; overflow: visible;
filter: drop-shadow(0 12px 18px rgba(20, 176, 96, 0.2));
} }
.eagle-shadow { .stick-eagle-shadow {
fill: rgba(30, 207, 112, 0.16); fill: rgba(20, 176, 96, 0.16);
animation: eagle-shadow 1s ease-in-out infinite; transform-origin: 110px 128px;
animation: stick-eagle-shadow 1s ease-in-out infinite;
} }
.eagle-fly { .stick-eagle-flight {
transform-origin: 88px 57px; transform-origin: 110px 76px;
animation: eagle-fly 0.58s ease-in-out infinite; animation: stick-eagle-flight 0.66s ease-in-out infinite;
} }
.eagle-wing { .stick-eagle-wing,
fill: currentColor; .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; transform-box: fill-box;
} }
.eagle-wing-left { .stick-eagle-wing-left,
transform-origin: 92% 62%; .stick-eagle-feather-left {
animation: eagle-wing-left 0.58s ease-in-out infinite; transform-origin: 94% 70%;
animation: stick-eagle-left-wing 0.66s ease-in-out infinite;
} }
.eagle-wing-right { .stick-eagle-wing-right,
transform-origin: 8% 62%; .stick-eagle-feather-right {
animation: eagle-wing-right 0.58s ease-in-out infinite; transform-origin: 6% 70%;
animation: stick-eagle-right-wing 0.66s ease-in-out infinite;
} }
.eagle-tail { .stick-eagle-feather {
fill: #18b85f; opacity: 0.55;
stroke-width: 4;
} }
.eagle-body, .stick-eagle-body,
.eagle-head { .stick-eagle-head {
fill: #22cf72; stroke-width: 5.5;
} }
.eagle-chest { .stick-eagle-chest,
fill: #baf8d4; .stick-eagle-tail,
.stick-eagle-beak {
stroke-width: 5;
} }
.eagle-beak { .stick-eagle-eye {
fill: #128f50; fill: #08723f;
}
.eagle-eye {
fill: #07502a;
} }
.loading-copy { .loading-copy {
@ -731,37 +747,37 @@ a {
} }
} }
@keyframes eagle-fly { @keyframes stick-eagle-flight {
0%, 0%,
100% { 100% {
transform: translateX(-3px) rotate(-2deg); transform: translateY(0) rotate(-1deg);
} }
50% { 50% {
transform: translateX(3px) rotate(2deg); transform: translateY(3px) rotate(1deg);
} }
} }
@keyframes eagle-wing-left { @keyframes stick-eagle-left-wing {
0%, 0%,
100% { 100% {
transform: rotate(12deg) translateY(0); transform: rotate(-4deg) translateY(0);
} }
50% { 50% {
transform: rotate(-22deg) translateY(9px); transform: rotate(16deg) translateY(10px);
} }
} }
@keyframes eagle-wing-right { @keyframes stick-eagle-right-wing {
0%, 0%,
100% { 100% {
transform: rotate(-12deg) translateY(0); transform: rotate(4deg) translateY(0);
} }
50% { 50% {
transform: rotate(22deg) translateY(9px); transform: rotate(-16deg) translateY(10px);
} }
} }
@keyframes eagle-shadow { @keyframes stick-eagle-shadow {
0%, 0%,
100% { 100% {
opacity: 0.45; opacity: 0.45;