[WebUI] Replace spinner with animated glyphicon

5 files changed, 18 insertions, 31 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 7a2f4b920..ca0ca815e 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -91,28 +91,6 @@ textarea {
 		font-size:11px !important;
 		}
 
-/* spinners optional */
-input {
-	margin:0px;
-	padding:0px;
-	width:60px;
-	}
-input[type=number] {
-	padding-right:25px;	/* at least image width */
-	text-align:right;
-	width:60px;
-	}
-input.number { /* should be same as type=number for IE and overriding */
-	padding-right:25px;	/* at least image width */
-	text-align:right;
-	}
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-	/* display:none; <- Crashes Chrome on hover */
-	-webkit-appearance:none;
-	margin:0; /* <-- Apparently some margin are still there even though it's hidden */
-}
-
 /* history table */
 .table-log {
 	table-layout:fixed;
@@ -238,12 +216,19 @@ td.maps-cell {
 	color:#005580;
 	text-decoration:underline;
 	}
-.spinner {
-	background:url('../img/spinner.gif') no-repeat -100px;
-	}
-.loading .spinner {
-	background-position:0 50%;
-	}
+
+/* Glyphicons animated spinners */
+.loading .glyphicon-spin {
+    animation: spin 1000ms infinite linear;
+}
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
+}
 
 /* widget */
 .widget-box {
diff --git a/interface/img/spinner.gif b/interface/img/spinner.gif
deleted file mode 100644
index 9ad345573..000000000
--- a/interface/img/spinner.gif
+++ /dev/null
diff --git a/interface/img/spinner.png b/interface/img/spinner.png
deleted file mode 100644
index bccc78605..000000000
--- a/interface/img/spinner.png
+++ /dev/null
diff --git a/interface/index.html b/interface/index.html
index b903b2575..5e7e9e4b6 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -31,8 +31,8 @@
 			<li role="presentation"><a id="history_nav" aria-controls="history" role="tab" href="#history" data-toggle="tab">History</a></li>
 		</ul>
     <ul class="nav navbar-nav nav-pills pull-right" style="display:none">
-      <li><a href="#" data-toggle="tab" id="refresh"><i class="glyphicon glyphicon-refresh"></i> Refresh</a></li>
-      <li class="spinner"><a href="#" data-toggle="tab" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
+      <li><a href="#" data-toggle="tab" id="refresh"><i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Refresh</a></li>
+      <li><a href="#" data-toggle="tab" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
     </ul>
 	</div>
 </nav>
diff --git a/interface/js/rspamd.js b/interface/js/rspamd.js
index e5f37e6df..f2690baf5 100644
--- a/interface/js/rspamd.js
+++ b/interface/js/rspamd.js
@@ -1289,7 +1289,9 @@
             $('#navBar').addClass('loading');
         });
         $(document).ajaxComplete(function () {
-            $('#navBar').removeClass('loading');
+            setTimeout(function () {
+                $('#navBar').removeClass('loading');
+            }, 1000);
         });
         $('#status_nav').bind('click', function (e) {
             getChart();