[WebUI] Replace spinner with animated glyphicon

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 7a2f4b9209ebc7ff49ed45363b6537692d529d97..ca0ca815e5e93407ea895c1c79540d752c3453d4 100644 (file)
--- 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 (file)
index 9ad3455..0000000
Binary files a/interface/img/spinner.gif and /dev/null differ

diff --git a/interface/img/spinner.png b/interface/img/spinner.png
deleted file mode 100644 (file)
index bccc786..0000000
Binary files a/interface/img/spinner.png and /dev/null differ

diff --git a/interface/index.html b/interface/index.html
index b903b2575a7b4285af730487b1a48451f935c0ea..5e7e9e4b68eae7d00ad7e087c6d5d7c00713e189 100644 (file)
--- 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 e5f37e6dfff2080257478d3183dd0c2232e1e5ab..f2690baf5e38c267fca99b40d0394033b7d78463 100644 (file)
--- 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();