diff --git a/packages/opendesign/src/loading/style/index.scss b/packages/opendesign/src/loading/style/index.scss
index 8758ab15dd9227626cac4b38c43076e260b9ac50..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/loading/style/index.scss
+++ b/packages/opendesign/src/loading/style/index.scss
@@ -1,2 +1,3 @@
 @use './var.scss' as *;
 @use './style.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/loading/style/media.scss b/packages/opendesign/src/loading/style/media.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d3f3fe143922bb20ae6204f79ec914aa45431222
--- /dev/null
+++ b/packages/opendesign/src/loading/style/media.scss
@@ -0,0 +1,7 @@
+@use '../../_styles/mixin.scss' as *;
+
+@include respond-to('<=pad_v') {
+  .o-loading {
+    --loading-label-icon-gap: var(--o-gap-1);
+  }
+}
diff --git a/packages/opendesign/src/loading/style/style.scss b/packages/opendesign/src/loading/style/style.scss
index 5a31d37e6eb9f91420d892267d887fd455c34dee..ff86d09c301d4a046b43439d8279cce727810889 100644
--- a/packages/opendesign/src/loading/style/style.scss
+++ b/packages/opendesign/src/loading/style/style.scss
@@ -16,9 +16,13 @@
   font-size: var(--loading-icon-size);
   color: var(--loading-icon-color);
   + .o-loading-label {
-    margin-left: 4px;
+    margin-left: var(--loading-label-icon-gap);
   }
 }
+.o-loading-label {
+  font-size: var(--loading-label-font-size);
+  line-height: var(--loading-label-line-height);
+}
 .o-layer-mask + .o-loading-main {
   color: var(--loading-mask-color);
   .o-loading-icon {
diff --git a/packages/opendesign/src/loading/style/theme-ascend.scss b/packages/opendesign/src/loading/style/theme-ascend.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..6bd5cbdc78c8d586284b118677be8e5553d41f37 100644
--- a/packages/opendesign/src/loading/style/theme-ascend.scss
+++ b/packages/opendesign/src/loading/style/theme-ascend.scss
@@ -0,0 +1 @@
+@use './theme-common.scss' as *;
diff --git a/packages/opendesign/src/loading/style/theme-common.scss b/packages/opendesign/src/loading/style/theme-common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ed2f635e8c1639cefe20a2e71ceef73fd51326af
--- /dev/null
+++ b/packages/opendesign/src/loading/style/theme-common.scss
@@ -0,0 +1,82 @@
+@use '../../_styles/mixin.scss' as *;
+
+.c-loading-lg {
+  --loading-icon-size: 80px;
+  flex-direction: column;
+  --loading-label-font-size: var(--o-font_size-text1);
+  --loading-label-line-height: var(--o-line_height-text1);
+  .o-loading-label {
+    margin-left: 0;
+    margin-top: var(--o-gap-4);
+  }
+}
+.c-loading-md {
+  --loading-icon-size: var(--o-icon_size-2xl);
+  flex-direction: column;
+  --loading-label-font-size: var(--o-font_size-tip2);
+  --loading-label-line-height: var(--o-line_height-tip2);
+  .o-loading-label {
+    margin-left: 0;
+    margin-top: var(--o-gap-2);
+  }
+}
+
+.c-loading-sm {
+  --loading-icon-size: var(--o-icon_size-m);
+  --loading-label-font-size: var(--o-font_size-tip2);
+  --loading-label-line-height: var(--o-line_height-tip2);
+}
+
+.c-loading-comp-sm {
+  --loading-icon-size: var(--o-icon_size-m);
+  --loading-label-font-size: var(--o-font_size-tip2);
+  --loading-label-line-height: var(--o-line_height-tip2);
+}
+
+.c-loading-xs {
+  --loading-icon-size: var(--o-icon_size-xs);
+  --loading-label-font-size: var(--o-font_size-tip2);
+  --loading-label-line-height: var(--o-line_height-tip2);
+}
+
+@include respond-to('pad_v-pc_s') {
+  .c-loading-ld {
+    --loading-icon-size: var(--o-icon_size-4xl);
+    --loading-label-font-size: var(--o-font_size-tip1);
+    --loading-label-line-height: var(--o-line_height-tip1);
+    .o-loading-label {
+      margin-top: var(--o-gap-3);
+    }
+  }
+
+  .c-loading-md {
+    --loading-icon-size: var(--o-icon_size-xl);
+  }
+
+  .c-loading-sm {
+    --loading-icon-size: var(--o-icon_size-s);
+  }
+
+  .c-loading-comp-sm {
+    --loading-icon-size: var(--o-icon_size-s);
+  }
+}
+@include respond-to('<=pad_v') {
+  .c-loading-lg {
+    --loading-icon-size: var(--o-icon_size-2xl);
+    .o-loading-label {
+      margin-top: var(--o-gap-3);
+    }
+  }
+
+  .c-loading-md {
+    --loading-icon-size: var(--o-icon_size-l);
+    .o-loading-label {
+      margin-top: var(--o-gap-1);
+    }
+  }
+
+  .c-loading-sm {
+    --loading-icon-size: var(--o-icon_size-xs);
+  }
+}
diff --git a/packages/opendesign/src/loading/style/theme-kunpeng.scss b/packages/opendesign/src/loading/style/theme-kunpeng.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a257ffca8df401a9e96f9d255bec712e95906c5b 100644
--- a/packages/opendesign/src/loading/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/loading/style/theme-kunpeng.scss
@@ -0,0 +1 @@
+@use './theme-common.scss' as *;
\ No newline at end of file
diff --git a/packages/opendesign/src/loading/style/theme-openeuler.scss b/packages/opendesign/src/loading/style/theme-openeuler.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a257ffca8df401a9e96f9d255bec712e95906c5b 100644
--- a/packages/opendesign/src/loading/style/theme-openeuler.scss
+++ b/packages/opendesign/src/loading/style/theme-openeuler.scss
@@ -0,0 +1 @@
+@use './theme-common.scss' as *;
\ No newline at end of file
diff --git a/packages/opendesign/src/loading/style/var.scss b/packages/opendesign/src/loading/style/var.scss
index 9833c3b2e6be1a2cbe73d24ed403a937b38449c8..af03d53ec8c9743dc6696a03c3abcec4b6ef125a 100644
--- a/packages/opendesign/src/loading/style/var.scss
+++ b/packages/opendesign/src/loading/style/var.scss
@@ -10,4 +10,9 @@
   --loading-mask-color: var(--o-color-info2-inverse);
 
   --loading-z-index: calc(var(--o-z-index-base) + 10);
+
+  --loading-label-font-size: var(--o-font_size-tip2);
+  --loading-label-line-height: var(--o-line_height-tip2);
+
+  --loading-label-icon-gap: var(--o-gap-2);
 }