From 886fa105718a4aca7ffa1e6ed5fe0238e04328c1 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期一, 16 三月 2026 11:17:14 +0800
Subject: [PATCH] UA 整理提交
---
loading.html | 189 +++++++---------------------------------------
1 files changed, 30 insertions(+), 159 deletions(-)
diff --git a/loading.html b/loading.html
index b0f2fcc..302187a 100644
--- a/loading.html
+++ b/loading.html
@@ -14,152 +14,11 @@
height: 200px;
background: rgba(0, 0, 0, .4);
border-radius: 50%;
+ padding: 20px;
+ overflow: hidden;
}
-
- ul {
- position: absolute;
- margin: -20px 0 0;
- padding: 0;
- left: 50%;
- top: 50%;
- transform: rotate(45deg) translate(-50%, -50%);
- }
-
- li {
- list-style-type: none;
- position: absolute;
- top: 0px;
- left: 0px;
- width: 20px;
- height: 20px;
- background: #00f7f9;
- border-radius: 50%;
- }
-
- #a {
- animation: a 1s ease-in-out infinite;
- top: -40px;
- left: -40px;
- }
-
- #b {
- animation: b 1s ease-in-out infinite;
- top: -40px;
- left: 0px;
- }
-
- #c {
- animation: c 1s ease-in-out infinite;
- top: -40px;
- left: 40px;
- }
-
- #d {
- animation: d 1s ease-in-out infinite;
- top: 0px;
- left: -40px;
- }
-
- #e {
- animation: e 1s ease-in-out infinite;
- top: 0px;
- left: 0px;
- }
-
- #f {
- animation: f 1s ease-in-out infinite;
- top: 0px;
- left: 40px;
- }
-
- #g {
- animation: g 1s ease-in-out infinite;
- top: 40px;
- left: -40px;
- }
-
- #h {
- animation: h 1s ease-in-out infinite;
- top: 40px;
- left: 0px;
- }
-
- #i {
- animation: i 1s ease-in-out infinite;
- top: 40px;
- left: 40px;
- }
-
- @keyframes a {
-
- 50%,
- 100% {
- top: 0px;
- left: -40px;
- }
- }
-
- @keyframes b {
-
- 50%,
- 100% {
- top: -40px;
- left: -40px;
- }
- }
-
- @keyframes c {
-
- 50%,
- 100% {
- top: -40px;
- left: 0px;
- }
- }
-
- @keyframes d {
-
- 50%,
- 100% {
- top: 40px;
- left: -40px;
- }
- }
-
- @keyframes f {
-
- 50%,
- 100% {
- top: -40px;
- left: 40px;
- }
- }
-
- @keyframes g {
-
- 50%,
- 100% {
- top: 40px;
- left: 0px;
- }
- }
-
- @keyframes h {
-
- 50%,
- 100% {
- top: 40px;
- left: 40px;
- }
- }
-
- @keyframes i {
-
- 50%,
- 100% {
- top: 0px;
- left: 40px;
- }
+ svg {
+
}
</style>
@@ -169,24 +28,36 @@
<body>
<div class="main">
- <ul>
- <li id='a'></li>
- <li id='b'></li>
- <li id='c'></li>
- <li id='d'></li>
- <li id='e'></li>
- <li id='f'></li>
- <li id='g'></li>
- <li id='h'></li>
- <li id='i'></li>
- </ul>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ fill="#090" style="animation:spinLoadingIcon 1s steps(12) infinite">
+ <style>@keyframes
+ spinLoadingIcon{to{transform:rotate(360deg)}}</style>
+ <defs>
+ <path id="myPath" d="M7 3 V1 s0,-1 1,-1 1,1 1,1 v2 s0,1 -1,1 -1,-1 -1,-1 z" />
+ </defs>
+ <g>
+ <use transform="rotate(0, 8, 8)" xlink:href="#myPath" opacity="1" />
+ <use transform="rotate(30, 8, 8)" xlink:href="#myPath" opacity="0.92" />
+ <use transform="rotate(60, 8, 8)" xlink:href="#myPath" opacity="0.84" />
+ <use transform="rotate(90, 8, 8)" xlink:href="#myPath" opacity="0.76" />
+ <use transform="rotate(120, 8, 8)" xlink:href="#myPath" opacity="0.68" />
+ <use transform="rotate(150, 8, 8)" xlink:href="#myPath" opacity="0.60" />
+ <use transform="rotate(180, 8, 8)" xlink:href="#myPath" opacity="0.52" />
+ <use transform="rotate(210, 8, 8)" xlink:href="#myPath" opacity="0.44" />
+ <use transform="rotate(240, 8, 8)" xlink:href="#myPath" opacity="0.36" />
+ <use transform="rotate(270, 8, 8)" xlink:href="#myPath" opacity="0.28" />
+ <use transform="rotate(300, 8, 8)" xlink:href="#myPath" opacity="0.20" />
+ <use transform="rotate(330, 8, 8)" xlink:href="#myPath" opacity="0.12" />
+ </g>
+ </svg>
</div>
<script>
// api.send('renderer-ready');
- // api.receive('java-ready', () => {
- // api.send('java-ready');
- // });
+ api.receive('java-ready', () => {
+ api.send('java-ready');
+ });
</script>
</body>
--
Gitblit v1.9.1