From 844525dd6fe7bc75659f7bae74f5dedfecf84347 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Sun, 11 Jan 2026 17:39:33 +0800
Subject: [PATCH 1/3] feat(Loading): the circular type of loading supports
 skyline render

---
 packages/components/loading/loading.less | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/components/loading/loading.less b/packages/components/loading/loading.less
index fb84d23d20..d020c26725 100644
--- a/packages/components/loading/loading.less
+++ b/packages/components/loading/loading.less
@@ -73,13 +73,29 @@
           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%);
+        // skyline 下，1. mask 不支持渐变只支持图片；2. conic-gradient() 多层渐变效果不符合预期。问题一：改用伪元素+背景色实现，背景色灵活性会降低，待支持渐变后建议恢复用 mask 实现。问题二：待定
+        // skyline: ✅ mask-image: image(url("xx"));
+        // skyline: ❌ mask-image: linear-gradient(x);
+
+        // mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
+        // /* stylelint-disable-next-line */
+        // -webkit-mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          border-radius: 100%;
+          background-color: @bg-color-container;
+          width: 70%;
+          height: 70%;
+        }
       }
     }
 

From 44469c0660eda1b19bc473155b4a5a0fe1fc1efc Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Sun, 11 Jan 2026 17:41:04 +0800
Subject: [PATCH 2/3] feat(Loading): update demo

---
 packages/components/loading/_example/base/index.js         | 6 +-----
 packages/components/loading/_example/base/index.wxml       | 2 +-
 packages/components/loading/_example/duration/index.js     | 4 ----
 packages/components/loading/_example/duration/index.wxml   | 2 +-
 packages/components/loading/_example/horizontal/index.js   | 6 +-----
 packages/components/loading/_example/horizontal/index.wxml | 2 +-
 packages/components/loading/_example/size/index.js         | 6 +-----
 packages/components/loading/_example/size/index.wxml       | 6 +++---
 8 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/packages/components/loading/_example/base/index.js b/packages/components/loading/_example/base/index.js
index 2709d2b02b..b79c5124bb 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 24380fa18a..cf4d8c268e 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 53e66cb56d..61a404ba85 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 f6b260df12..3c4da1729b 100644
--- a/packages/components/loading/_example/duration/index.wxml
+++ b/packages/components/loading/_example/duration/index.wxml
@@ -1,5 +1,5 @@
 <t-loading
-  theme="{{ skylineRender ? 'spinner' : 'circular'}}"
+  theme="circular"
   size="52rpx"
   text="加载中..."
   t-class-text="text-l"
diff --git a/packages/components/loading/_example/horizontal/index.js b/packages/components/loading/_example/horizontal/index.js
index 2709d2b02b..b79c5124bb 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 fd9a090519..50e490f4fe 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 2709d2b02b..b79c5124bb 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 e4663eec89..6100700d5f 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="64rpx" text="加载中..." class="large" />
 
   <view class="demo-desc">中尺寸</view>
 
-  <t-loading theme="{{ skylineRender ? 'spinner' : 'circular'}}" size="56rpx" text="加载中..." class="medium" />
+  <t-loading theme="circular" size="56rpx" text="加载中..." class="medium" />
 
   <view class="demo-desc">小尺寸</view>
 
-  <t-loading theme="{{ skylineRender ? 'spinner' : 'circular'}}" size="48rpx" text="加载中..." />
+  <t-loading theme="circular" size="48rpx" text="加载中..." />
 </view>

From 9142abd68cb0abf231e9051380804024b11fe1bb Mon Sep 17 00:00:00 2001
From: tdesign-bot <tdesign@tencent.com>
Date: Mon, 12 Jan 2026 11:44:29 +0000
Subject: [PATCH 3/3] chore: stash changelog [ci skip]

---
 packages/tdesign-miniprogram/.changelog/pr-4184.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 packages/tdesign-miniprogram/.changelog/pr-4184.md

diff --git a/packages/tdesign-miniprogram/.changelog/pr-4184.md b/packages/tdesign-miniprogram/.changelog/pr-4184.md
new file mode 100644
index 0000000000..946e43d617
--- /dev/null
+++ b/packages/tdesign-miniprogram/.changelog/pr-4184.md
@@ -0,0 +1,6 @@
+---
+pr_number: 4184
+contributor: anlyyao
+---
+
+- feat(Loading): 支持在 `skyline` 下使用 `circular` 加载类型 @anlyyao ([#4184](https://github.com/Tencent/tdesign-miniprogram/pull/4184))