Tweak the dash loader @alekseybobkov

The leaf is too hard to customize (white label considerations)
Use a white container with subtle fade after loading
Introduce rspin (reverse spin) animation, not used, but may come in handy

modules/backend/assets/css/dashboard/dashboard.css

@@ -1,34 +1,73 @@
+.dashboard-container > .report-container {
+  -webkit-transition: background 1s ease;
+  transition: background 1s ease;
+  border-radius: 5px;
+}
 .dashboard-container > .report-container.loading {
   position: absolute;
   width: 100%;
   height: 100%;
+  background: #fff;
 }
 .dashboard-container > .report-container.loading .loading-indicator-container {
   position: absolute;
   left: 0;
   top: 0;
-  height: 100%;
   width: 100%;
+  height: 100%;
 }
 .dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator {
+  background: transparent;
   padding: 0;
   height: 150px;
   top: 50%;
   margin-top: -90px;
+  /*
+                &:before {
+                    content: '';
+                    background: transparent url('../../images/october-leaf.svg') no-repeat;
+                    background-size: 49px 65px;
+                    width: 49px;
+                    height: 65px;
+                    left: 50%;
+                    top: 50%;
+                    margin-top: -33px;
+                    margin-left: -24px;
+                    position: absolute;
+                    .opacity(0.2);
+                }
+*/
+}
+.dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator:after {
+  content: '';
+  background: transparent url('../../images/dashboard-loading-indicator.svg') no-repeat;
+  background-size: 100px 100px;
+  width: 100px;
+  height: 100px;
+  left: 50%;
+  top: 50%;
+  margin-top: -50px;
+  margin-left: -50px;
+  position: absolute;
+  -webkit-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
 }
 .dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator:before {
   content: '';
-  background: transparent url('../../images/october-leaf.svg') no-repeat;
-  background-size: 49px 65px;
-  width: 49px;
-  height: 65px;
+  background: transparent url('../../images/dashboard-loading-indicator.svg') no-repeat;
+  background-size: 150px 150px;
+  width: 150px;
+  height: 150px;
   left: 50%;
   top: 50%;
-  margin-top: -33px;
-  margin-left: -24px;
+  margin-top: -75px;
+  margin-left: -75px;
   position: absolute;
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+  /*.animation(rspin 1.5s linear infinite);*/
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
 }
 .dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator > span {
   left: 50%;
@@ -38,4 +77,8 @@
   margin-top: -100px;
   background-size: 200px 200px;
   background-image: url('../../images/dashboard-loading-indicator.svg');
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+  opacity: 0.8;
+  filter: alpha(opacity=80);
 }

modules/backend/assets/less/dashboard/dashboard.less

@@ -1,24 +1,29 @@
 @import "../../../../backend/assets/less/core/boot.less";
 
 .dashboard-container > .report-container {
+    .transition(background 1s ease);
+    border-radius: 5px;
+
     &.loading {
         position: absolute;
         width: 100%;
         height: 100%;
+        background: #fff;
 
         .loading-indicator-container {
             position: absolute;
             left: 0;
             top: 0;
-            height: 100%;
             width: 100%;
+            height: 100%;
 
             .loading-indicator {
+                background: transparent;
                 padding: 0;
                 height: 150px;
                 top: 50%;
                 margin-top: -90px;
-
+/*
                 &:before {
                     content: '';
                     background: transparent url('../../images/october-leaf.svg') no-repeat;
@@ -32,6 +37,37 @@
                     position: absolute;
                     .opacity(0.2);
                 }
+*/
+
+                &:after {
+                    content: '';
+                    background: transparent url('../../images/dashboard-loading-indicator.svg') no-repeat;
+                    background-size: 100px 100px;
+                    width: 100px;
+                    height: 100px;
+                    left: 50%;
+                    top: 50%;
+                    margin-top: -50px;
+                    margin-left: -50px;
+                    position: absolute;
+                    .animation(spin 1s linear infinite);
+                }
+
+                &:before {
+                    content: '';
+                    background: transparent url('../../images/dashboard-loading-indicator.svg') no-repeat;
+                    background-size: 150px 150px;
+                    width: 150px;
+                    height: 150px;
+                    left: 50%;
+                    top: 50%;
+                    margin-top: -75px;
+                    margin-left: -75px;
+                    position: absolute;
+                    /*.animation(rspin 1.5s linear infinite);*/
+                    .animation(spin 1.5s linear infinite);
+                    .opacity(.9);
+                }
 
                 > span {
                     left: 50%;
@@ -41,6 +77,8 @@
                     margin-top: -100px;
                     background-size: 200px 200px;
                     background-image: url('../../images/dashboard-loading-indicator.svg');
+                    .animation(spin 2s linear infinite);
+                    .opacity(.8);
                 }
             }
         }

modules/backend/controllers/index/index.htm

@@ -16,7 +16,9 @@
 <script>
     $(document).ready(function() {
         $.request('onInitReportContainer').done(function(){
-            $('#dashReportContainer').removeClass('loading')
+            setTimeout(function() {
+                $('#dashReportContainer').removeClass('loading')
+            }, 100)
         })
     })
 </script>

modules/system/assets/ui/less/loader.less

@@ -316,4 +316,25 @@ html.cssanimations {
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(359deg); }
-}
+}
+
+@-moz-keyframes rspin {
+    0% { -moz-transform: rotate(359deg); }
+    100% { -moz-transform: rotate(0deg); }
+}
+@-webkit-keyframes rspin {
+    0% { -webkit-transform: rotate(359deg); }
+    100% { -webkit-transform: rotate(0deg); }
+}
+@-o-keyframes rspin {
+    0% { -o-transform: rotate(359deg); }
+    100% { -o-transform: rotate(0deg); }
+}
+@-ms-keyframes rspin {
+    0% { -ms-transform: rotate(359deg); }
+    100% { -ms-transform: rotate(0deg); }
+}
+@keyframes rspin {
+    0% { transform: rotate(359deg); }
+    100% { transform: rotate(0deg); }
+}

modules/system/assets/ui/storm.css

@@ -2048,6 +2048,21 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
 @keyframes spin{0%{transform:rotate(0deg)}
 100%{transform:rotate(359deg)}
 }
+@-moz-keyframes rspin{0%{-moz-transform:rotate(359deg)}
+100%{-moz-transform:rotate(0deg)}
+}
+@-webkit-keyframes rspin{0%{-webkit-transform:rotate(359deg)}
+100%{-webkit-transform:rotate(0deg)}
+}
+@-o-keyframes rspin{0%{-o-transform:rotate(359deg)}
+100%{-o-transform:rotate(0deg)}
+}
+@-ms-keyframes rspin{0%{-ms-transform:rotate(359deg)}
+100%{-ms-transform:rotate(0deg)}
+}
+@keyframes rspin{0%{transform:rotate(359deg)}
+100%{transform:rotate(0deg)}
+}
 .select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}
 .select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}
 .select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}