fix #2334 @2

diff --git a/images/interface.svg b/images/interface.svg
index a9da0ad3428b387355d2d2ba9bea9d9735bc752e..a192010f804367983499583a9914a508538b1eb4 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -1,10 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <symbol id="interface-loader" viewBox="0 0 48 48">
         <circle cx="24" cy="24" r="23"></circle>
-        <circle cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16" stroke-dasharray="80 80"
-                transform="rotate(102 24 24)">
-            <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 24 24;360 24 24"
-                              keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
+        <circle class="animate" cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16" stroke-dasharray="80 80"
+                transform="rotate(0 24 24)">
         </circle>
     </symbol>
     <symbol id="interface-chevron" viewBox="0 0 512 512">

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index a5d03154c2927bfff8678be19c06aee78d025889..2a93ab718d31a4b811e15b3f9bffc927df5ea3f0 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -1068,7 +1068,7 @@ Fluidbook.prototype = {
         });
     },
     displayLoader: function () {
-        $("#loader").show();
+        $("#loader").addClass('show');
         if (!this.support.isMobile) {
             $('body').addClass('loading');
         }
@@ -1097,10 +1097,8 @@ Fluidbook.prototype = {
         if (!force && $('#splash').css('visibility') == 'visible') {
             return;
         }
-        if (this.support.isMobile) {
-            $("#loader").hide();
-        } else {
-            $("#loader").hide();
+        $("#loader").removeClass('show');
+        if (!this.support.isMobile) {
             $('body').removeClass('loading');
         }
     },

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 0c5f9d75026a30ee138d418dc06dd8aa1d75ccd1..559852d62cc7434a19f79082f1dee5b676d9a6ca 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -250,6 +250,15 @@ body, html {
 
 }
 
+@keyframes loader-spin {
+       0% {
+               transform: rotate(0deg);
+       }
+       100% {
+               transform: rotate(360deg);
+       }
+}
+
 /* Loader */
 #loader {
        position: absolute;
@@ -261,11 +270,24 @@ body, html {
        width: @loaderSize;
        height: @loaderSize;
        margin: @loaderMargin 0 0 @loaderMargin;
+       display: none;
+
        svg {
                width: 100%;
                height: 100%;
                fill: @loader-background-color;
                color: @loader-foreground-color;
+               transform-origin: 50% 50%
+       }
+
+       &.show {
+               display: block;
+               svg {
+                       animation-name: loader-spin;
+                       animation-duration: 1s;
+                       animation-iteration-count: infinite;
+                       animation-timing-function: linear;
+               }
        }
 }