perf: 同步完整版分支代码

2022-01-07 15:08:21 +08:00
parent 3418f44be4
commit 0bdaf55ff1
8 changed files with 123 additions and 46 deletions
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
    <link rel="stylesheet" href="/iconfont.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pure-admin-thin</title>
+    <script src="/sortable.min.js"></script>
    <script>
      window.process = {};
    </script>
@@ -14,35 +15,89 @@
  <body>
    <div id="app">
      <style>
-        p {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          font-size: 26px;
+        * {
+          margin: 0;
+          padding: 0;
        }

-        p::after {
+        html,
+        body {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+          font-family: "Reggae One", cursive;
+        }
+
+        .loader,
+        .loader:before,
+        .loader:after {
+          border-radius: 50%;
+          width: 2.5em;
+          height: 2.5em;
+          -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+          -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
+          animation: loadAnimation 1.8s infinite ease-in-out;
+        }
+
+        .loader {
+          color: #406eeb;
+          font-size: 10px;
+          margin: 80px auto;
+          position: relative;
+          text-indent: -9999em;
+          -webkit-transform: translateZ(0);
+          -ms-transform: translateZ(0);
+          transform: translateZ(0);
+          -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+        }
+
+        .loader:before,
+        .loader:after {
          content: "";
          position: absolute;
-          top: 0%;
-          bottom: 0;
-          animation: dot 1s infinite steps(1, start);
+          top: 0;
        }

-        @keyframes dot {
-          33.33% {
-            content: ".";
-          }
-          66.67% {
-            content: "..";
-          }
+        .loader:before {
+          left: -3.5em;
+          -webkit-animation-delay: -0.32s;
+          animation-delay: -0.32s;
+        }
+
+        .loader:after {
+          left: 3.5em;
+        }
+
+        @-webkit-keyframes loadAnimation {
+          0%,
+          80%,
          100% {
-            content: "...";
+            box-shadow: 0 2.5em 0 -1.3em;
+          }
+
+          40% {
+            box-shadow: 0 2.5em 0 0;
+          }
+        }
+
+        @keyframes loadAnimation {
+          0%,
+          80%,
+          100% {
+            box-shadow: 0 2.5em 0 -1.3em;
+          }
+
+          40% {
+            box-shadow: 0 2.5em 0 0;
          }
        }
      </style>
-      <p>Loading</p>
+      <div class="loader">Loading...</div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>