diff --git a/apps/common/main/resources/img/load-mask/loading-small.svg b/apps/common/main/resources/img/load-mask/loading-small.svg
new file mode 100644
index 0000000000..d2ff975237
--- /dev/null
+++ b/apps/common/main/resources/img/load-mask/loading-small.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20">
+<circle cx="10" cy="10" fill="none" stroke="#444" stroke-width="1.5" r="7.25" stroke-dasharray="160%, 40%">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 10 10;360 10 10" keyTimes="0;1"/>
+</circle>
+</svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/load-mask/loading.gif b/apps/common/main/resources/img/load-mask/loading.gif
deleted file mode 100644
index 4d90465033..0000000000
Binary files a/apps/common/main/resources/img/load-mask/loading.gif and /dev/null differ
diff --git a/apps/common/main/resources/img/load-mask/loading.svg b/apps/common/main/resources/img/load-mask/loading.svg
new file mode 100644
index 0000000000..9128bdda1d
--- /dev/null
+++ b/apps/common/main/resources/img/load-mask/loading.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28">
+<circle cx="14" cy="14" fill="none" stroke="#fff" stroke-width="1.5" r="10.25" stroke-dasharray="160%, 40%">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 14 14;360 14 14" keyTimes="0;1"/>
+</circle>
+</svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less
index 443bf72839..1534c7e3e4 100644
--- a/apps/common/main/resources/less/loadmask.less
+++ b/apps/common/main/resources/less/loadmask.less
@@ -1,4 +1,8 @@
 @loadmask-zindex: @zindex-modal + 100;
+@loadmask-image-height: 28px;
+@loadmask-image-width: 28px;
+@loadmask-small-image-height: 20px;
+@loadmask-small-image-width: 20px;
 
 .asc-loadmask {
     position: absolute;
@@ -15,10 +19,10 @@
     position: absolute;
     z-index: @loadmask-zindex + 1;
     padding: 20px;
-    line-height: 33px;
+    line-height: @loadmask-image-height;
     border: none;
     background-image: none;
-    background-color: fade(darken(@gray-deep, 15%), 70%);
+    background-color: fade(@black, 90%);
     color: @gray-light;
     .border-radius(@border-radius-large);
 
@@ -28,9 +32,9 @@
     }
 
     .asc-loadmask-image {
-        background-image: ~"url(@{common-image-const-path}/load-mask/loading.gif)";
-        height: 33px;
-        width: 33px;
+        background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg)";
+        height: @loadmask-image-height;
+        width: @loadmask-image-width;
         float: left;
         margin-left: 20px;
     }
@@ -39,6 +43,18 @@
         .fontsize(@font-size-large);
         margin: 0 20px;
     }
+
+    .left-panel & {
+        line-height: @loadmask-small-image-height;
+        background-color: transparent;
+        color: @gray-deep;
+
+        .asc-loadmask-image {
+            background-image: ~"url(@{common-image-const-path}/load-mask/loading-small.svg)";
+            height: @loadmask-small-image-height;
+            width: @loadmask-small-image-width;
+        }
+    }
 }
 
 .app-error-panel {