feat(ui): add loading animation

emqx · Jan 14, 2025 · d2c7c74 · d2c7c74
1 parent 85ca95c
commit d2c7c74
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 2 deletions.
diff --git a/apps/desktop/src/renderer/index.html b/apps/desktop/src/renderer/index.html
@@ -9,10 +9,78 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self' 'unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; img-src * data:"
     />
+    <style>
+      body {
+        margin: 0;
+      }
+      #loading {
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .u-loading {
+        width: 128px;
+        height: 128px;
+        display: block;
+        margin: 48px;
+      }
+      .u-loading__symbol {
+        padding: 8px;
+        animation: loading 3s infinite;
+      }
+      .u-loading__symbol img {
+        display: block;
+        max-width: 100%;
+        animation: loading-icon 3s infinite;
+      }
+      @keyframes loading {
+        0% {
+          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
+        }
+        50% {
+          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
+        }
+        100% {
+          transform: perspective(250px) rotateX(180deg) rotateY(-180deg);
+        }
+      }
+      @keyframes loading-icon {
+        0% {
+          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
+        }
+        15% {
+          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
+        }
+        16% {
+          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
+        }
+        50% {
+          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
+        }
+        65% {
+          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
+        }
+        66% {
+          transform: perspective(250px) rotateX(180deg) rotateY(180deg);
+        }
+        100% {
+          transform: perspective(250px) rotateX(180deg) rotateY(180deg);
+        }
+      }
+    </style>
   </head>
 
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div id="loading">
+        <div class="u-loading">
+          <div class="u-loading__symbol">
+            <img src="/icon.png" />
+          </div>
+        </div>
+      </div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/apps/desktop/src/renderer/public/icon.png b/apps/desktop/src/renderer/public/icon.png
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -5,9 +5,77 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MQTTX</title>
+    <style>
+      body {
+        margin: 0;
+      }
+      #loading {
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .u-loading {
+        width: 128px;
+        height: 128px;
+        display: block;
+        margin: 48px;
+      }
+      .u-loading__symbol {
+        padding: 8px;
+        animation: loading 3s infinite;
+      }
+      .u-loading__symbol img {
+        display: block;
+        max-width: 100%;
+        animation: loading-icon 3s infinite;
+      }
+      @keyframes loading {
+        0% {
+          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
+        }
+        50% {
+          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
+        }
+        100% {
+          transform: perspective(250px) rotateX(180deg) rotateY(-180deg);
+        }
+      }
+      @keyframes loading-icon {
+        0% {
+          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
+        }
+        15% {
+          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
+        }
+        16% {
+          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
+        }
+        50% {
+          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
+        }
+        65% {
+          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
+        }
+        66% {
+          transform: perspective(250px) rotateX(180deg) rotateY(180deg);
+        }
+        100% {
+          transform: perspective(250px) rotateX(180deg) rotateY(180deg);
+        }
+      }
+    </style>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div id="loading">
+        <div class="u-loading">
+          <div class="u-loading__symbol">
+            <img src="/icon.png" />
+          </div>
+        </div>
+      </div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/apps/web/public/icon.png b/apps/web/public/icon.png
diff --git a/packages/ui/auto-imports.d.ts b/packages/ui/auto-imports.d.ts
@@ -99,6 +99,8 @@ declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
+    readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>