From 277d253fbf2fb6aa3782bf6ee6dd99a4013fdc66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com>
Date: Wed, 28 Feb 2018 15:05:51 +0100
Subject: [PATCH] Add spinning reload animation for Satan's grace

---
 src/app/webide/webide.component.html |  2 +-
 src/app/webide/webide.component.scss | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html
index 163476b..125ff21 100644
--- a/src/app/webide/webide.component.html
+++ b/src/app/webide/webide.component.html
@@ -27,4 +27,4 @@
         [class.disabled]="saveButtonState === 'SAVING'"
 ><span *ngIf="saveButtonState === 'DIRTY'">Save!</span>
  <span *ngIf="saveButtonState === 'SAVED'">Done!</span>
- <span *ngIf="saveButtonState === 'SAVING'">Reloading...</span></button>
+ <span *ngIf="saveButtonState === 'SAVING'"><div class="loader"></div>Reloading...</span></button>
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss
index 0ad49f6..daf91d9 100644
--- a/src/app/webide/webide.component.scss
+++ b/src/app/webide/webide.component.scss
@@ -7,3 +7,21 @@
 .btn-secondary {
   border-radius: 0;
 }
+
+.loader {
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  border-top: 2px solid #212529;
+  width: 15px;
+  height: 15px;
+  animation: spin 2s linear infinite;
+  display: inline-block;
+  margin-right: 5px;
+  position: relative;
+  top: 2px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}