feat(preloader): a simple loading screen

ElonH · May 26, 2020 · a2b9525 · a2b9525
1 parent 5209203
commit a2b9525
Showing 1 changed file with 64 additions and 1 deletion.
diff --git a/src/index.html b/src/index.html
@@ -10,7 +10,70 @@
 </head>
 
 <body>
-  <rng-app>Loading...</rng-app>
+  <rng-app>
+    <div class="loading">
+      <h1>RcloneNg</h1>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.1 150.1">
+        <path
+          d="M128.6,69.6c-4.1-7.1-10.2-12.8-17.5-16.3c-0.9,5-2.7,9.7-5.2,14.1l-4.1,7.1c8.6,4.8,11.7,15.7,6.9,24.3 s-15.7,11.7-24.3,6.9c-2.8-1.6-5.2-3.9-6.8-6.7l-8.3-14.3H56l-6.7,11.6l8.3,14.3c11.3,19.6,36.4,26.3,56,15S139.9,89.2,128.6,69.6 "
+          style="fill:#70caf2" />
+        <path
+          d="M87.5,9.5c-19.6-11.3-44.7-4.6-56,15c-4.1,7.1-6,15.2-5.4,23.3c4.8-1.7,9.8-2.5,14.8-2.5l8.2,0 c-0.2-9.9,7.7-18,17.6-18.1c9.9-0.2,18,7.7,18.1,17.6c0.1,3.2-0.8,6.4-2.4,9.2l-8.3,14.3l6.7,11.6l13.4,0l8.3-14.3 C113.8,45.8,107.1,20.8,87.5,9.5C87.5,9.5,87.5,9.5,87.5,9.5"
+          style="fill:#b4e3f9" />
+        <path
+          d="M54.3,112.5l-4.1-7.1c-8.5,5.1-19.4,2.3-24.5-6.1s-2.3-19.4,6.1-24.5c2.8-1.7,5.9-2.5,9.2-2.5l16.5,0 l6.7-11.6l-6.7-11.6l-16.5,0c-22.6,0-41,18.4-41,41s18.4,41,41,41c8.1,0,16.1-2.4,22.9-7C60,120.8,56.8,116.9,54.3,112.5"
+          style="fill:#3f79ad" /> </svg>
+      <span> Loading ... </span>
+    </div>
+  </rng-app>
+  <style>
+    body {
+      /* background: #222831; */
+      margin: 0;
+      padding: 0;
+    }
+
+    rng-app {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
+    }
+
+    div.loading {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      height: 100vh;
+    }
+
+    div.loading>svg {
+      height: 100px;
+      width: auto;
+      animation: rotation 1.5s infinite linear;
+    }
+
+    div.loading>span {
+      font-size: 2.25rem;
+      font-weight: 700;
+      line-height: 3rem;
+    }
+
+    div.loading>span {
+      font-size: 0.9375rem;
+      font-weight: 600;
+      line-height: 1.5rem;
+      margin-top: 0.668rem;
+    }
+
+    @keyframes rotation {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(359deg);
+      }
+    }
+  </style>
 </body>
 
 </html>