diff --git a/packages/components/common/style/theme/_components.less b/packages/components/common/style/theme/_components.less
index d45272915..e6d505eb8 100644
--- a/packages/components/common/style/theme/_components.less
+++ b/packages/components/common/style/theme/_components.less
@@ -24,5 +24,8 @@
 
     --td-switch-dot-disabled-color: var(--td-font-white-2);
     --td-switch-loading-color: var(--td-font-white-1);
+
+    --td-progress-circle-inner-bg-color: var(--bg-color-page);
+    --td-loading-circular-inner-bg-color: var(--bg-color-page);
   }
 }
diff --git a/packages/components/loading/__test__/__snapshots__/demo.test.js.snap b/packages/components/loading/__test__/__snapshots__/demo.test.js.snap
index c89e9a251..444aeb1a6 100644
--- a/packages/components/loading/__test__/__snapshots__/demo.test.js.snap
+++ b/packages/components/loading/__test__/__snapshots__/demo.test.js.snap
@@ -38,7 +38,7 @@ exports[`Loading Loading duration demo works fine 1`] = `
 <duration>
   <t-loading
     duration="{{1200}}"
-    size="52rpx"
+    size="44rpx"
     tClassText="text-l"
     text="加载中..."
     theme="circular"
@@ -87,7 +87,7 @@ exports[`Loading Loading size demo works fine 1`] = `
   >
     <t-loading
       class="large"
-      size="64rpx"
+      size="52rpx"
       text="加载中..."
       theme="circular"
     />
@@ -98,7 +98,7 @@ exports[`Loading Loading size demo works fine 1`] = `
     </wx-view>
     <t-loading
       class="medium"
-      size="56rpx"
+      size="44rpx"
       text="加载中..."
       theme="circular"
     />
@@ -108,7 +108,7 @@ exports[`Loading Loading size demo works fine 1`] = `
       小尺寸
     </wx-view>
     <t-loading
-      size="48rpx"
+      size="40rpx"
       text="加载中..."
       theme="circular"
     />
diff --git a/packages/components/loading/_example/base/index.js b/packages/components/loading/_example/base/index.js
index 2709d2b02..b79c5124b 100644
--- a/packages/components/loading/_example/base/index.js
+++ b/packages/components/loading/_example/base/index.js
@@ -1,5 +1 @@
-import SkylineBehavior from '@behaviors/skyline.js';
-
-Component({
-  behaviors: [SkylineBehavior],
-});
+Component({});
diff --git a/packages/components/loading/_example/base/index.wxml b/packages/components/loading/_example/base/index.wxml
index 24380fa18..cf4d8c268 100644
--- a/packages/components/loading/_example/base/index.wxml
+++ b/packages/components/loading/_example/base/index.wxml
@@ -1,5 +1,5 @@
 <view class="loading-container-flex">
-  <t-loading wx:if="{{!skylineRender}}" theme="circular" size="40rpx" class="wrapper" />
+  <t-loading theme="circular" size="40rpx" class="wrapper" />
   <t-loading theme="spinner" size="40rpx" class="wrapper" />
   <t-loading theme="dots" size="80rpx" class="wrapper" />
   <t-loading theme="custom" class="wrapper">
diff --git a/packages/components/loading/_example/duration/index.js b/packages/components/loading/_example/duration/index.js
index 53e66cb56..61a404ba8 100644
--- a/packages/components/loading/_example/duration/index.js
+++ b/packages/components/loading/_example/duration/index.js
@@ -1,8 +1,4 @@
-import SkylineBehavior from '@behaviors/skyline.js';
-
 Component({
-  behaviors: [SkylineBehavior],
-
   data: {
     duration: 800,
   },
diff --git a/packages/components/loading/_example/duration/index.wxml b/packages/components/loading/_example/duration/index.wxml
index f6b260df1..473fb77a5 100644
--- a/packages/components/loading/_example/duration/index.wxml
+++ b/packages/components/loading/_example/duration/index.wxml
@@ -1,6 +1,6 @@
 <t-loading
-  theme="{{ skylineRender ? 'spinner' : 'circular'}}"
-  size="52rpx"
+  theme="circular"
+  size="44rpx"
   text="加载中..."
   t-class-text="text-l"
   duration="{{2000 - duration}}"
diff --git a/packages/components/loading/_example/horizontal/index.js b/packages/components/loading/_example/horizontal/index.js
index 2709d2b02..b79c5124b 100644
--- a/packages/components/loading/_example/horizontal/index.js
+++ b/packages/components/loading/_example/horizontal/index.js
@@ -1,5 +1 @@
-import SkylineBehavior from '@behaviors/skyline.js';
-
-Component({
-  behaviors: [SkylineBehavior],
-});
+Component({});
diff --git a/packages/components/loading/_example/horizontal/index.wxml b/packages/components/loading/_example/horizontal/index.wxml
index fd9a09051..50e490f4f 100644
--- a/packages/components/loading/_example/horizontal/index.wxml
+++ b/packages/components/loading/_example/horizontal/index.wxml
@@ -1,4 +1,4 @@
 <view class="loading-container-flex">
-  <t-loading wx:if="{{!skylineRender}}" theme="circular" size="40rpx" text="加载中..." class="wrapper" />
+  <t-loading theme="circular" size="40rpx" text="加载中..." class="wrapper" />
   <t-loading theme="spinner" size="40rpx" text="加载中..." inheritColor class="wrapper" />
 </view>
diff --git a/packages/components/loading/_example/size/index.js b/packages/components/loading/_example/size/index.js
index 2709d2b02..b79c5124b 100644
--- a/packages/components/loading/_example/size/index.js
+++ b/packages/components/loading/_example/size/index.js
@@ -1,5 +1 @@
-import SkylineBehavior from '@behaviors/skyline.js';
-
-Component({
-  behaviors: [SkylineBehavior],
-});
+Component({});
diff --git a/packages/components/loading/_example/size/index.wxml b/packages/components/loading/_example/size/index.wxml
index e4663eec8..04691886d 100644
--- a/packages/components/loading/_example/size/index.wxml
+++ b/packages/components/loading/_example/size/index.wxml
@@ -1,11 +1,11 @@
 <view class="loading-size-demo">
-  <t-loading theme="{{ skylineRender ? 'spinner' : 'circular'}}" size="64rpx" text="加载中..." class="large" />
+  <t-loading theme="circular" size="52rpx" text="加载中..." class="large" />
 
   <view class="demo-desc">中尺寸</view>
 
-  <t-loading theme="{{ skylineRender ? 'spinner' : 'circular'}}" size="56rpx" text="加载中..." class="medium" />
+  <t-loading theme="circular" size="44rpx" text="加载中..." class="medium" />
 
   <view class="demo-desc">小尺寸</view>
 
-  <t-loading theme="{{ skylineRender ? 'spinner' : 'circular'}}" size="48rpx" text="加载中..." />
+  <t-loading theme="circular" size="40rpx" text="加载中..." />
 </view>
diff --git a/packages/components/loading/_example/vertical/index.js b/packages/components/loading/_example/vertical/index.js
index 2709d2b02..b79c5124b 100644
--- a/packages/components/loading/_example/vertical/index.js
+++ b/packages/components/loading/_example/vertical/index.js
@@ -1,5 +1 @@
-import SkylineBehavior from '@behaviors/skyline.js';
-
-Component({
-  behaviors: [SkylineBehavior],
-});
+Component({});
diff --git a/packages/components/loading/_example/vertical/index.wxml b/packages/components/loading/_example/vertical/index.wxml
index edfb35d86..1ea27fc41 100644
--- a/packages/components/loading/_example/vertical/index.wxml
+++ b/packages/components/loading/_example/vertical/index.wxml
@@ -1,10 +1,4 @@
 <div class="box">
-  <t-loading
-    theme="{{ skylineRender ? 'spinner' : 'circular'}}"
-    size="40rpx"
-    text="加载中"
-    layout="vertical"
-    class="wrapper"
-  />
+  <t-loading theme="circular" size="40rpx" text="加载中" layout="vertical" class="wrapper" />
   <t-loading theme="spinner" size="40rpx" text="加载中" layout="vertical" class="wrapper" />
 </div>
diff --git a/packages/components/loading/loading.less b/packages/components/loading/loading.less
index fb84d23d2..afb598b06 100644
--- a/packages/components/loading/loading.less
+++ b/packages/components/loading/loading.less
@@ -7,6 +7,7 @@
 @loading-text-font: var(--td-loading-text-font, @font-body-small);
 @loading-z-index: var(--td-loading-z-index, 3500);
 @loading-full-bg-color: var(--td-loading-full-bg-color, rgba(255, 255, 255, 0.6));
+@loading-circular-inner-bg-color: var(--td-loading-circular-inner-bg-color, @bg-color-container);
 
 .@{loading} {
   display: inline-flex;
@@ -66,6 +67,7 @@
 
     &--circular {
       .@{loading}__circular {
+        position: relative;
         border-radius: 100%;
         width: 100%;
         height: 100%;
@@ -73,13 +75,20 @@
           from 180deg at 50% 50%,
           rgba(255, 255, 255, 0) 0deg,
           rgba(255, 255, 255, 0) 60deg,
-          currentColor 330deg,
+          @loading-color 330deg,
           rgba(255, 255, 255, 0) 360deg
         );
-        mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
 
-        /* stylelint-disable-next-line */
-        -webkit-mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
+        &-inner {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: calc(100% - 12rpx);
+          height: calc(100% - 12rpx);
+          border-radius: 100%;
+          background-color: @loading-circular-inner-bg-color;
+        }
       }
     }
 
diff --git a/packages/components/loading/loading.wxml b/packages/components/loading/loading.wxml
index 0557730e1..ef0d3a6da 100644
--- a/packages/components/loading/loading.wxml
+++ b/packages/components/loading/loading.wxml
@@ -16,7 +16,9 @@
       wx:key="index"
       class="{{classPrefix}}__dot {{classPrefix}}__dot-{{index}}"
     />
-    <view wx:if="{{ theme === 'circular' }}" class="{{classPrefix}}__circular" />
+    <view wx:if="{{ theme === 'circular' }}" class="{{classPrefix}}__circular">
+      <view class="{{classPrefix}}__circular-inner"></view>
+    </view>
     <block wx:if="{{ theme === 'dots' }}">
       <view
         class="{{classPrefix}}__dot"
diff --git a/packages/components/progress/progress.less b/packages/components/progress/progress.less
index ac9e47b59..b09f0cff8 100644
--- a/packages/components/progress/progress.less
+++ b/packages/components/progress/progress.less
@@ -38,7 +38,7 @@
   --td-progress-info-light-color,
   @text-color-anti
 ); // 进度条浅色label字体颜色(在进度条色块内显示的色值)
-@progress-circle-inner-bg-color: var(--td-progress-circle-inner-bg-color, @text-color-anti); // 环境进度条内圆背景色
+@progress-circle-inner-bg-color: var(--td-progress-circle-inner-bg-color, @bg-color-container); // 环境进度条内圆背景色
 
 @progress: ~'@{prefix}-progress';
 
diff --git a/packages/tdesign-miniprogram/example/app.less b/packages/tdesign-miniprogram/example/app.less
index 71990cd28..dd1473bc0 100644
--- a/packages/tdesign-miniprogram/example/app.less
+++ b/packages/tdesign-miniprogram/example/app.less
@@ -19,7 +19,6 @@ page {
   --bg-color-demo-secondary: var(--td-bg-color-container);
   --td-navbar-bg-color: var(--td-bg-color-page);
   --td-navbar-color: var(--td-text-color-primary);
-  --td-progress-circle-inner-bg-color: var(--bg-color-demo);
 }
 
 .skyline {