From da5bf9cee039ae6b6c394402c48142c4d72e075c Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 9 Aug 2020 21:59:05 -0500
Subject: [PATCH] add loading icon to pre-app mount index.html page

---
 client/public/index.html | 163 +++++++++++++++++++++++++++++++++++----
 1 file changed, 149 insertions(+), 14 deletions(-)
diff --git a/client/public/index.html b/client/public/index.html
index 4123528..7d837cc 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -1,17 +1,152 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+        <title><%= htmlWebpackPlugin.options.title %></title>
+        <base href="/"/>
+    </head>
+    <style>
+        body {
+            background: #0a0a0a;
+        }
+
+        .cssload-loader {
+            position: absolute;
+            top: calc(50% - 100px);
+            left: calc(50% - 100px);
+            width: 100px;
+            height: 100px;
+            -webkit-perspective: 780px;
+            perspective: 780px;
+        }
+
+        .cssload-inner {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            -o-box-sizing: border-box;
+            -ms-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            border-radius: 50%;
+            -o-border-radius: 50%;
+            -ms-border-radius: 50%;
+            -webkit-border-radius: 50%;
+            -moz-border-radius: 50%;
+        }
+
+        .cssload-inner.cssload-one {
+            left: 0%;
+            top: 0%;
+            animation: cssload-rotate-one 1.15s linear infinite;
+            -o-animation: cssload-rotate-one 1.15s linear infinite;
+            -ms-animation: cssload-rotate-one 1.15s linear infinite;
+            -webkit-animation: cssload-rotate-one 1.15s linear infinite;
+            -moz-animation: cssload-rotate-one 1.15s linear infinite;
+            border-bottom: 3px solid #5c5edc;
+        }
+
+        .cssload-inner.cssload-two {
+            right: 0%;
+            top: 0%;
+            animation: cssload-rotate-two 1.15s linear infinite;
+            -o-animation: cssload-rotate-two 1.15s linear infinite;
+            -ms-animation: cssload-rotate-two 1.15s linear infinite;
+            -webkit-animation: cssload-rotate-two 1.15s linear infinite;
+            -moz-animation: cssload-rotate-two 1.15s linear infinite;
+            border-right: 3px solid rgba(76, 70, 101, 0.99);
+        }
+
+        .cssload-inner.cssload-three {
+            right: 0%;
+            bottom: 0%;
+            animation: cssload-rotate-three 1.15s linear infinite;
+            -o-animation: cssload-rotate-three 1.15s linear infinite;
+            -ms-animation: cssload-rotate-three 1.15s linear infinite;
+            -webkit-animation: cssload-rotate-three 1.15s linear infinite;
+            -moz-animation: cssload-rotate-three 1.15s linear infinite;
+            border-top: 3px solid #e9908a;
+        }
+
+        @keyframes cssload-rotate-one {
+            0% {
+                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+            }
+            100% {
+                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+            }
+        }
+
+        @-webkit-keyframes cssload-rotate-one {
+            0% {
+                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+            }
+            100% {
+                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+            }
+        }
+
+        @keyframes cssload-rotate-two {
+            0% {
+                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+            }
+            100% {
+                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+            }
+        }
+
+        @-webkit-keyframes cssload-rotate-two {
+            0% {
+                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+            }
+            100% {
+                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+            }
+        }
+
+        @keyframes cssload-rotate-three {
+            0% {
+                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+            }
+            100% {
+                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+            }
+        }
+
+        @-webkit-keyframes cssload-rotate-three {
+            0% {
+                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+            }
+            100% {
+                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+            }
+        }
+
+    </style>
+    <body>
+        <noscript>
+            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
+                enabled. Please enable it to continue.</strong>
+        </noscript>
+        <div id="app">
+            <div id="loading-wrapper">
+                <div class='cssload-loader'>
+                    <div class='cssload-inner cssload-one'></div>
+                    <div class='cssload-inner cssload-two'></div>
+                    <div class='cssload-inner cssload-three'></div>
+                </div>
+            </div>
+        </div>
+        <!-- built files will be auto injected -->
+    </body>
 </html>
