From 26138c6586afc4a6d998bb7aa294ef710a5ea236 Mon Sep 17 00:00:00 2001
From: alext <alextselegidis@gmail.com>
Date: Wed, 15 Nov 2017 23:35:11 +0100
Subject: [PATCH] Improved loading spinner styling.

---
 src/application/views/backend/header.php |  2 +-
 src/assets/css/general.css               | 57 ++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/application/views/backend/header.php b/src/application/views/backend/header.php
index 9f0fc0ca..b1a13cbd 100755
--- a/src/application/views/backend/header.php
+++ b/src/application/views/backend/header.php
@@ -107,7 +107,7 @@
 <div id="notification" style="display: none;"></div>
 
 <div id="loading" style="display: none;">
-    <div class="any-element animation-dial is-loading">
+    <div class="any-element animation is-loading">
         &nbsp;
     </div>
 </div>
diff --git a/src/assets/css/general.css b/src/assets/css/general.css
index e6621114..f66bf760 100644
--- a/src/assets/css/general.css
+++ b/src/assets/css/general.css
@@ -322,3 +322,60 @@ li.language:hover {
 .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
     display: none;
 }
+
+/* LOADING SPINNER
+   ------------------------------------------------------------------------- */
+
+.is-loading {
+    position: relative;
+}
+
+.is-loading:before,
+.is-loading:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}
+
+.animation:after {
+    width: 60px;
+    height: 60px;
+    margin: -25px 0 0 -25px;
+
+    border: 5px solid rgba(0, 0, 0, .4);
+    border-radius: 50px;
+}
+
+.animation:after {
+    border-bottom-color: transparent;
+    animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin-reverse {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(-360deg);
+    }
+}
+
+.any-element {
+    width: 60px;
+    height: 60px;
+    position: fixed;
+    left: 50vw;
+    top: 50vh;
+    margin-left: -30px;
+    margin-bottom: -30px;
+}