diff --git a/apps/common/main/resources/img/load-mask/loading-small.svg b/apps/common/main/resources/img/load-mask/loading-small.svg
deleted file mode 100644
index d2ff97523..000000000
--- a/apps/common/main/resources/img/load-mask/loading-small.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<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.svg b/apps/common/main/resources/img/load-mask/loading.svg
index 9128bdda1..573b12985 100644
--- a/apps/common/main/resources/img/load-mask/loading.svg
+++ b/apps/common/main/resources/img/load-mask/loading.svg
@@ -1,5 +1,18 @@
-<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
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style>
+        use {display: none}
+        use:target {display: inline}
+    </style>
+    <symbol id="middle1" 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>
+    </symbol>
+    <symbol id="small1" 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>
+    </symbol>
+    <use id="middle" href="#middle1" />
+    <use id="small" href="#small1" />
+</svg>
diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less
index ab5526ff1..c8d7793af 100644
--- a/apps/common/main/resources/less/loadmask.less
+++ b/apps/common/main/resources/less/loadmask.less
@@ -36,7 +36,7 @@
     }
 
     .asc-loadmask-image {
-        background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg)";
+        background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg#middle)";
         height: @loadmask-image-height;
         width: @loadmask-image-width;
         float: left;
@@ -57,7 +57,7 @@
         transform: translate(-50%, 0);
 
         .asc-loadmask-image {
-            background-image: ~"url(@{common-image-const-path}/load-mask/loading-small.svg)";
+            background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg#small)";
             height: @loadmask-small-image-height;
             width: @loadmask-small-image-width;
         }