From a991b02a200048e86e7b5d98bdabc28cae571dc9 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Thu, 29 Apr 2021 20:45:49 +0200
Subject: [PATCH] First load loading indicator #42

---
 public/index.html | 82 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 81 insertions(+), 1 deletion(-)
diff --git a/public/index.html b/public/index.html
index 96b1a44..cfb00bd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,12 +7,92 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+      #loading-wrapper {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background-color: white;
+      }
+    
+      #loading-text {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #506784;
+        font-family: sans-serif;
+        font-size: 20px;
+      }
+      
+      .svg-container {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .loader-svg {
+        position: absolute;
+        left: 0; right: 0; top: 0; bottom: 0;
+        fill: none;
+        stroke-width: 5px;
+        stroke-linecap: round;
+        stroke: #119DFF;
+      }
+
+      .loader-svg.bg {
+        stroke: #C8D4E3;
+      }
+
+      .loader-svg.front {
+        stroke-dasharray: 402px;
+        animation: loading 2s linear 0s infinite;
+      }
+
+      @keyframes loading {
+        0% {
+          stroke-dasharray: 100px 402px;
+          stroke-dashoffset: 0;
+        }
+        50% {
+          stroke-dasharray: 251px;
+          stroke-dashoffset: -251px;
+        }
+        100% {
+          stroke-dasharray: 100px 402px;
+          stroke-dashoffset: -502px;
+        }
+      }
+    </style>
   </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>
+    <div id="app">
+      <div id="loading-wrapper">
+        <div id="loading-text">LOADING</div>
+        <svg class="svg-container" height="170" width="170" viewBox="0 0 170 170">
+          <circle
+            class="loader-svg bg"
+            cx="85"
+            cy="85"
+            r="80"
+          />
+          <circle
+            class="loader-svg front"
+            cx="85"
+            cy="85"
+            r="80"
+          />
+        </svg>
+      </div>
+    </div>
     <!-- built files will be auto injected -->
   </body>
 </html>
