feat: Add loading animation

nocpiun · Jun 6, 2024 · 6fde944 · 6fde944 · github-actions · Jun 6, 2024
1 parent 012a9e8
commit 6fde944
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,10 +11,62 @@
     <meta name="keywords" content="calcium,calculator,计算器,网页计算器,多功能计算器,函数图像,函数绘制"/>
     <link rel="manifest" href="/manifest.webmanifest">
     <title>Calcium</title>
+    <style>
+      /* Loading animation */
+      #root:not(:empty) + .loading {
+        display: none;
+      }
+      .loading {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #f7f7f7;
+      }
+      .loading-title {
+        color: #d4d6d8;
+        font-size: 50pt;
+        margin-bottom: 45px;
+      }
+      .loading-bar {
+        width: 330px;
+        height: 5px;
+        background-color: #d4d6d8;
+        margin: 0 auto;
+        overflow: hidden;
+      }
+      .loading-bar .loading-bar-tablet {
+        width: 130px;
+        height: 100%;
+        background-color: #0165e1;
+        animation: loading 1.5s ease infinite;
+      }
+
+      @keyframes loading {
+        from {
+          transform: translateX(-130px);
+        }
+
+        to {
+          transform: translateX(calc(330px + 130px));
+        }
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div class="loading">
+      <div class="loading-title">Calcium</div>
+      <div class="loading-bar">
+        <div class="loading-bar-tablet"></div>
+      </div>
+    </div>
     <div id="dialogs"></div>
     <script src="https://unpkg.com/[email protected]/dist/hidpi-canvas.min.js"></script>
   </body>

diff --git a/src/style/layout.less b/src/style/layout.less
@@ -41,12 +41,6 @@ main.calcium {
     }
 }
 
-.no-mobile {
-    display: none;
-    color: #000;
-    text-align: center;
-}
-
 h1, h2, h3, h4, h5, h6, p {
     color: var(--ca-gray-light);
     cursor: default;