取名小程序

NamingAssistant/pages/home/index.ttss

@@ -4,6 +4,54 @@
   overflow: hidden;
 }
 
+.loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  background: rgba(6, 10, 22, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(6px);
+}
+
+.loading-dialog {
+  width: 82%;
+  max-width: 320px;
+  padding: 26px 24px;
+  border-radius: 22px;
+  background: linear-gradient(180deg, rgba(22, 28, 52, 0.95), rgba(12, 18, 36, 0.88));
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 24px 48px rgba(8, 10, 24, 0.4);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-items: center;
+  color: rgba(255, 244, 227, 0.9);
+  text-align: center;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid rgba(255, 244, 227, 0.25);
+  border-top-color: #ffd8a0;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  font-size: 15px;
+  letter-spacing: 2px;
+  line-height: 1.6;
+}
+
+.loading-subtext {
+  font-size: 12px;
+  color: rgba(255, 244, 227, 0.6);
+  letter-spacing: 1px;
+}
+
 .glow-layer {
   position: absolute;
   inset: 0;
@@ -56,6 +104,15 @@
   }
 }
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .content {
   position: relative;
   z-index: 2;