diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less
index c3f291fcec..4a8c60668d 100644
--- a/style/mobile/components/loading/_index.less
+++ b/style/mobile/components/loading/_index.less
@@ -111,6 +111,42 @@
       animation: none;
     }
   }
+
+  &__parent--relative {
+    position: relative;
+  }
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &--full {
+    z-index: @z-index-loading;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    background-color: @loading-full-bg-color;
+  }
+
+  &--fullscreen {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: @z-index-loading;
+    background-color: @loading-full-bg-color;
+  }
 }
 
 .generate-spinner(@n, @i: 1) when (@i =< @n) {
diff --git a/style/mobile/components/loading/_var.less b/style/mobile/components/loading/_var.less
index 5b46a18964..6c3bcc8a8f 100644
--- a/style/mobile/components/loading/_var.less
+++ b/style/mobile/components/loading/_var.less
@@ -7,3 +7,5 @@
 @loading-text-line-height: var(--td-loading-text-line-height, 20px);
 @loading-dot-size: var(--td-loading-dot-size, 8px);
 @loading-line-bg-color: var(--td-loading-line-bg-color, @text-color-primary);
+@loading-z-index: var(--td-loading-z-index, 3500);
+@loading-full-bg-color: var(--td-loading-full-bg-color, rgba(255, 255, 255, 60%));