美化初始化页面

JiuLing-zhang · JiuLing-zhang · commit d91ff81a5ff9 · 2024-01-17T19:33:14.000+08:00
diff --git a/src/wwwroot/index.html b/src/wwwroot/index.html
@@ -7,12 +7,20 @@
     <title>透明锁屏</title>
     <base href="/" />
     <link href="app.css" rel="stylesheet" />
+    <link href="initialize-screen.css" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="SignDebugger.styles.css" rel="stylesheet" />
 </head>
 
 <body style="overflow-x:hidden">
-    <div id="app">资源加载中...</div>
+    <div id="app">
+        <div class="initialize-container">
+            <div class="initialize-loading">
+                <div class="initialize-loader"></div>
+                <div class="initialize-icon"></div>
+            </div>
+        </div>
+    </div>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.
diff --git a/src/wwwroot/initialize-screen.css b/src/wwwroot/initialize-screen.css
@@ -0,0 +1,56 @@
+.initialize-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #FFFFFF;
+}
+
+.initialize-loading {
+    position: relative;
+    width: 150px;
+    height: 150px;
+}
+
+.initialize-icon,
+.initialize-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.initialize-icon {
+    width: 32px;
+    height: 32px;
+    background: url('icon.ico') no-repeat center center;
+    background-size: contain;
+    z-index: 2;
+}
+
+.initialize-loader {
+    width: 120px;
+    height: 120px;
+    animation: spin 3s linear infinite, border-gradient 3s linear infinite;
+    z-index: 1;
+}
+
+@keyframes spin {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes border-gradient {
+    0% {
+        box-shadow: 0 0 10px 0 #fb8c00, 0 0 20px 0 #fb8c00, 0 0 30px 0 #fb8c00;
+    }
+
+    100% {
+        box-shadow: 0 0 10px 20px transparent, 0 0 20px 30px transparent, 0 0 30px 40px transparent;
+    }
+}
