feat: add loading spinner during page load (#372)

doocs · Aug 30, 2024 · 58ca8e8 · 58ca8e8
1 parent 7592506
commit 58ca8e8
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -33,14 +33,76 @@
       .katex .mathnormal {
         font-family: 'Times New Roman' !important;
       }
+
+      .loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 99999;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100vw;
+        height: 100vh;
+        font-size: 18px;
+      }
+
+      .loading::before {
+        content: url('/src/assets/images/favicon.png');
+        width: 100px;
+        height: 100px;
+        margin-bottom: 26px;
+      }
+
+      .loading.dark {
+        color: #ffffff;
+        background-color: #141414;
+      }
+
+      .loading .txt {
+        position: absolute;
+        bottom: 10%;
+      }
+
+      .loading .txt::after {
+        content: '...';
+        animation: dots 1.5s steps(4, end) infinite;
+      }
+
+      @keyframes dots {
+        0% {
+          content: ' ';
+        }
+        25% {
+          content: '.';
+        }
+        50% {
+          content: '..';
+        }
+        75% {
+          content: '...';
+        }
+      }
     </style>
   </head>
 
   <body>
     <noscript>
       <strong>Please enable JavaScript to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app">
+      <div class="loading">
+        <strong>致力于让 Markdown 编辑更简单</strong>
+        <p class="txt">正在加载编辑器</p>
+      </div>
+    </div>
+    <script>
+      const theme = localStorage.getItem('vueuse-color-scheme')
+      if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.querySelector('.loading').classList.add('dark')
+      }
+    </script>
     <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>

diff --git a/src/components/RunLoading.vue b/src/components/RunLoading.vue
@@ -16,9 +16,7 @@ onMounted(() => {
       v-if="loading"
       class="loading"
     >
-      <el-text size="large" tag="strong">
-        致力于让 Markdown 编辑更简单
-      </el-text>
+      <strong>致力于让 Markdown 编辑更简单</strong>
     </div>
   </transition>
 </template>