From 4dcf6e44317f97b4c89f70db889ebf02c305f2e4 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 1 Oct 2018 22:01:47 -0400
Subject: [PATCH] added loading icon

---
 src/index.html | 63 +++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 52 insertions(+), 11 deletions(-)
diff --git a/src/index.html b/src/index.html
index ff94bff9..1d470ce9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,24 +2,65 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <title>Sengi</title>
-  <base href="./">
+    <meta charset="utf-8">
+    <title>Sengi</title>
+    <base href="./">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
-  
 
+    <style>
+        .lds-ripple {
+            /* display: inline-block; */
+            margin: 30px auto;
+            position: relative;
+            width: 64px;
+            height: 64px;
+        }
+
+        .lds-ripple div {
+            position: absolute;
+            border: 4px solid #444f74;
+            opacity: 1;
+            border-radius: 50%;
+            animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+        }
+
+        .lds-ripple div:nth-child(2) {
+            animation-delay: -0.5s;
+        }
+
+        @keyframes lds-ripple {
+            0% {
+                top: 28px;
+                left: 28px;
+                width: 0;
+                height: 0;
+                opacity: 1;
+            }
+
+            100% {
+                top: -1px;
+                left: -1px;
+                width: 58px;
+                height: 58px;
+                opacity: 0;
+            }
+        }
+    </style>
 </head>
 
 <body>
-  <app-root>
-    loading...
-  </app-root>
+    <app-root>
+        <div class="lds-ripple">
+            <div></div>
+            <div></div>
+        </div>
+    </app-root>
 
-  <script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script> 
+    <script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script>
 </body>
 
 </html>
\ No newline at end of file
