feat: new loading

nulla2011 · May 22, 2023 · 3a58f52 · 3a58f52
1 parent 9be1afa
commit 3a58f52
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -11,8 +11,11 @@
     <div id="app"></div>
     <div class="loading-screen">
       <div class="loading-main">
+        <!-- <div class="loading-bar"></div> -->
+        <div class="loadingio-spinner-spin-zo5dn3x3m2p"><div class="ldio-7htin0opikm">
+        <div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>
+        </div></div>
         <div class="loading-text">Loading,,,</div>
-        <div class="loading-bar"></div>
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>

diff --git a/public/loading.css b/public/loading.css
@@ -25,32 +25,7 @@
   color: #1a2b3c;
   user-select: none;
 }
-.loading-bar,
-.loading-bar::after {
-  margin-top: 10px;
-  width: 200px;
-  height: 5px;
-  border-radius: 2px;
-  display: block;
-  overflow: clip;
-}
-.loading-bar {
-  background-color: #46acf5;
-}
-.loading-bar::after {
-  content: '';
-  background-image: radial-gradient(circle, #d3e5f1 2px, transparent 56px);
-  transform: translate(0%);
-  animation: 1.5s linear -0.4s infinite bar;
-}
-@keyframes bar {
-  from {
-    transform: translate(-75%);
-  }
-  to {
-    transform: translate(75%);
-  }
-}
+
 .animating-fadeout {
   animation-name: fade-out;
   animation-duration: 0.6s;
@@ -65,3 +40,150 @@
     opacity: 0;
   }
 }
+@keyframes ldio-7htin0opikm {
+  0% {
+    opacity: 1;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(1.5, 1.5);
+  }
+  100% {
+    opacity: 0;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(1, 1);
+  }
+}
+.ldio-7htin0opikm div > div {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #46acf5;
+  animation: ldio-7htin0opikm 1s linear infinite;
+}
+.ldio-7htin0opikm div:nth-child(1) > div {
+  left: 144px;
+  top: 94px;
+  animation-delay: -0.9166666666666666s;
+}
+.ldio-7htin0opikm > div:nth-child(1) {
+  transform: rotate(0deg);
+  transform-origin: 150px 100px;
+}
+.ldio-7htin0opikm div:nth-child(2) > div {
+  left: 137px;
+  top: 119px;
+  animation-delay: -0.8333333333333334s;
+}
+.ldio-7htin0opikm > div:nth-child(2) {
+  transform: rotate(30deg);
+  transform-origin: 143px 125px;
+}
+.ldio-7htin0opikm div:nth-child(3) > div {
+  left: 119px;
+  top: 137px;
+  animation-delay: -0.75s;
+}
+.ldio-7htin0opikm > div:nth-child(3) {
+  transform: rotate(60deg);
+  transform-origin: 125px 143px;
+}
+.ldio-7htin0opikm div:nth-child(4) > div {
+  left: 94px;
+  top: 144px;
+  animation-delay: -0.6666666666666666s;
+}
+.ldio-7htin0opikm > div:nth-child(4) {
+  transform: rotate(90deg);
+  transform-origin: 100px 150px;
+}
+.ldio-7htin0opikm div:nth-child(5) > div {
+  left: 69px;
+  top: 137px;
+  animation-delay: -0.5833333333333334s;
+}
+.ldio-7htin0opikm > div:nth-child(5) {
+  transform: rotate(120deg);
+  transform-origin: 75px 143px;
+}
+.ldio-7htin0opikm div:nth-child(6) > div {
+  left: 51px;
+  top: 119px;
+  animation-delay: -0.5s;
+}
+.ldio-7htin0opikm > div:nth-child(6) {
+  transform: rotate(150deg);
+  transform-origin: 57px 125px;
+}
+.ldio-7htin0opikm div:nth-child(7) > div {
+  left: 44px;
+  top: 94px;
+  animation-delay: -0.4166666666666667s;
+}
+.ldio-7htin0opikm > div:nth-child(7) {
+  transform: rotate(180deg);
+  transform-origin: 50px 100px;
+}
+.ldio-7htin0opikm div:nth-child(8) > div {
+  left: 51px;
+  top: 69px;
+  animation-delay: -0.3333333333333333s;
+}
+.ldio-7htin0opikm > div:nth-child(8) {
+  transform: rotate(210deg);
+  transform-origin: 57px 75px;
+}
+.ldio-7htin0opikm div:nth-child(9) > div {
+  left: 69px;
+  top: 51px;
+  animation-delay: -0.25s;
+}
+.ldio-7htin0opikm > div:nth-child(9) {
+  transform: rotate(240deg);
+  transform-origin: 75px 57px;
+}
+.ldio-7htin0opikm div:nth-child(10) > div {
+  left: 94px;
+  top: 44px;
+  animation-delay: -0.16666666666666666s;
+}
+.ldio-7htin0opikm > div:nth-child(10) {
+  transform: rotate(270deg);
+  transform-origin: 100px 50px;
+}
+.ldio-7htin0opikm div:nth-child(11) > div {
+  left: 119px;
+  top: 51px;
+  animation-delay: -0.08333333333333333s;
+}
+.ldio-7htin0opikm > div:nth-child(11) {
+  transform: rotate(300deg);
+  transform-origin: 125px 57px;
+}
+.ldio-7htin0opikm div:nth-child(12) > div {
+  left: 137px;
+  top: 69px;
+  animation-delay: 0s;
+}
+.ldio-7htin0opikm > div:nth-child(12) {
+  transform: rotate(330deg);
+  transform-origin: 143px 75px;
+}
+.loadingio-spinner-spin-zo5dn3x3m2p {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  overflow: hidden;
+  background: #ffffff;
+}
+.ldio-7htin0opikm {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translateZ(0) scale(1);
+  backface-visibility: hidden;
+  transform-origin: 0 0; /* see note above */
+}
+.ldio-7htin0opikm div {
+  box-sizing: content-box;
+}
+/* generated by https://loading.io/ */
diff --git a/vite.config.ts b/vite.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
       manifest: {
         name: '女声优拼音缩写查询',
         short_name: 'sysx',
-        description: '查询女声优拼音缩写',
+        description: '查询女声优拼音首字母缩写',
         theme_color: '#f6f7f8',
         icons: [
           { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },