Elastic: Use Bootstrap's spinner (and spinner-border instead of custom fa-spin)

skins/elastic/styles/global.less

@@ -66,30 +66,6 @@
        url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
-/* E.g. for animated 'loading' icon */
-
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-
-
 /* Reset some Bootstrap style */
 
 body, button, input, optgroup, select, textarea, .popover {

skins/elastic/styles/mixins.less

@@ -32,9 +32,9 @@
 }
 
 .animated-icon-class {
-    // fa-spin is defined in styles.less
+    // spinner-border is defined in Bootstrap
-    -webkit-animation: fa-spin 2s infinite linear;
+    -webkit-animation: spinner-border 1.5s infinite linear;
-    animation: fa-spin 2s infinite linear;
+    animation: spinner-border 1.5s infinite linear;
 }
 
 .font-icon-solid(@icon) {

skins/elastic/styles/widgets/common.less

@@ -224,19 +224,12 @@ fieldset.image-attachment {
     justify-content: center;
     z-index: 3;
 
-    .spinner {
+    .spinner-border {
-        position: relative;
-        display: inline-block;
         width: 7rem;
         height: 7rem;
-        overflow: hidden;
-        text-indent: -999em;
         color: @color-spinner-circle;
         border: 1rem solid;
         border-color: currentColor @color-spinner-item currentColor currentColor;
-        border-radius: 50%;
-        -webkit-animation: fa-spin 1s infinite linear;
-        animation: fa-spin 1s infinite linear;
     }
 }
 

skins/elastic/ui.js

@@ -3278,8 +3278,9 @@ function rcube_elastic_ui()
         frame = $(frame);
 
         if (frame.length) {
-            var loader = $('<div>').attr('class', 'iframe-loader')
+            var loader = $('<div class="iframe-loader">')
-                .append($('<div>').attr('class', 'spinner').text(rcmail.gettext('loading')));
+                .append($('<div class="spinner spinner-border" role="status">')
+                    .append($('<span class="sr-only">').text(rcmail.gettext('loading'))));
 
             // custom 'loaded' event is expected to be triggered by plugins
             // when using the loader not on an iframe