feat: 加入预加载动画

2020-12-24 18:38:33 +08:00
parent 519728e0cd
commit 0ea62ef46a
6 changed files with 228 additions and 8 deletions
--- a/src/preload/loading.html
+++ b/src/preload/loading.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>electron-vue3-vite</title>
+  <style>
+    /* https://projects.lukehaas.me/css-loaders/ */
+    body { margin: 0; background-color: #242424; }
+    .loading-box { height: 100vh; display: flex; align-items: center; }
+
+    .load1 .loader,
+    .load1 .loader:before,
+    .load1 .loader:after {
+      background: #ffffff;
+      -webkit-animation: load1 1s infinite ease-in-out;
+      animation: load1 1s infinite ease-in-out;
+      width: 1em;
+      height: 4em;
+    }
+
+    .load1 .loader {
+      color: #ffffff;
+      text-indent: -9999em;
+      margin: 88px auto;
+      position: relative;
+      font-size: 11px;
+      -webkit-transform: translateZ(0);
+      -ms-transform: translateZ(0);
+      transform: translateZ(0);
+      -webkit-animation-delay: -0.16s;
+      animation-delay: -0.16s;
+    }
+
+    .load1 .loader:before,
+    .load1 .loader:after {
+      position: absolute;
+      top: 0;
+      content: '';
+    }
+
+    .load1 .loader:before {
+      left: -1.5em;
+      -webkit-animation-delay: -0.32s;
+      animation-delay: -0.32s;
+    }
+
+    .load1 .loader:after {
+      left: 1.5em;
+    }
+
+    @-webkit-keyframes load1 {
+
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 0;
+        height: 4em;
+      }
+
+      40% {
+        box-shadow: 0 -2em;
+        height: 5em;
+      }
+    }
+
+    @keyframes load1 {
+
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 0;
+        height: 4em;
+      }
+
+      40% {
+        box-shadow: 0 -2em;
+        height: 5em;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="loading-box load1">
+    <div class="loader"></div>
+  </div>
+</body>
+
+</html>