From 82e9f90cf2c165989ddf02fc50c04fc469c28fc2 Mon Sep 17 00:00:00 2001
From: John <a377342263@163.com>
Date: Thu, 23 May 2024 23:36:01 +0800
Subject: [PATCH] 123

---
 index.html | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 104 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index c2f34b6..bf6dc9a 100644
--- a/index.html
+++ b/index.html
@@ -13,9 +13,112 @@
 
 
     <title>loan</title>
+    <style>
+      .first-loading-wrap {
+        display: flex;
+        width: 100%;
+        height: 100vh;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      .first-loading-wrap > h1 {
+        font-size: 128px
+      }
+
+      .first-loading-wrap .loading-wrap {
+        padding: 98px;
+        display: flex;
+        justify-content: center;
+        align-items: center
+      }
+
+      .dot {
+        animation: antRotate 1.2s infinite linear;
+        transform: rotate(45deg);
+        position: relative;
+        display: inline-block;
+        font-size: 32px;
+        width: 32px;
+        height: 32px;
+        box-sizing: border-box
+      }
+
+      .dot i {
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        display: block;
+        background-color: #1890ff;
+        border-radius: 100%;
+        transform: scale(.75);
+        transform-origin: 50% 50%;
+        opacity: .3;
+        animation: antSpinMove 1s infinite linear alternate
+      }
+
+      .dot i:nth-child(1) {
+        top: 0;
+        left: 0
+      }
+
+      .dot i:nth-child(2) {
+        top: 0;
+        right: 0;
+        -webkit-animation-delay: .4s;
+        animation-delay: .4s
+      }
+
+      .dot i:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        -webkit-animation-delay: .8s;
+        animation-delay: .8s
+      }
+
+      .dot i:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        -webkit-animation-delay: 1.2s;
+        animation-delay: 1.2s
+      }
+
+      @keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg)
+        }
+      }
+
+      @-webkit-keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg)
+        }
+      }
+
+      @keyframes antSpinMove {
+        to {
+          opacity: 1
+        }
+      }
+
+      @-webkit-keyframes antSpinMove {
+        to {
+          opacity: 1
+        }
+      }
+    </style>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div class="first-loading-wrap">
+        <div class="loading-wrap">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+      </div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
