From 7905c7e66f3c50448433515be2122f64edf4e516 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Tue, 14 Apr 2020 18:35:56 +0300
Subject: [PATCH] chore: add initial loader to index.html in dev-app

---
 npm/ng-packs/apps/dev-app/src/index.html  |  4 +++-
 npm/ng-packs/apps/dev-app/src/styles.scss | 25 +++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/npm/ng-packs/apps/dev-app/src/index.html b/npm/ng-packs/apps/dev-app/src/index.html
index c879c573b1..96dd4c1706 100644
--- a/npm/ng-packs/apps/dev-app/src/index.html
+++ b/npm/ng-packs/apps/dev-app/src/index.html
@@ -8,6 +8,8 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body class="bg-light">
-    <app-root></app-root>
+    <app-root>
+      <div class="donut centered"></div>
+    </app-root>
   </body>
 </html>
diff --git a/npm/ng-packs/apps/dev-app/src/styles.scss b/npm/ng-packs/apps/dev-app/src/styles.scss
index 90d4ee0072..efe57bd8c3 100644
--- a/npm/ng-packs/apps/dev-app/src/styles.scss
+++ b/npm/ng-packs/apps/dev-app/src/styles.scss
@@ -1 +1,26 @@
 /* You can add global styles to this file, and also import other style files */
+
+@keyframes donut-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.donut {
+  display: inline-block;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #7983ff;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: donut-spin 1.2s linear infinite;
+
+  &.centered {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}