Skip to content

【WIP】feat(Loading): the circular type of loading supports skyline render #4184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anlyyao wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

【WIP】feat(Loading): the circular type of loading supports skyline render #4184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
844525d
feat(Loading): the circular type of loading supports skyline render
anlyyao Jan 11, 2026
44469c0
feat(Loading): update demo
anlyyao Jan 11, 2026
9142abd
chore: stash changelog [ci skip]
tdesign-bot Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions packages/components/loading/_example/base/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
import SkylineBehavior from '@behaviors/skyline.js';

Component({
behaviors: [SkylineBehavior],
});
Component({});
2 changes: 1 addition & 1 deletion packages/components/loading/_example/base/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
4 changes: 0 additions & 4 deletions packages/components/loading/_example/duration/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
import SkylineBehavior from '@behaviors/skyline.js';

Component({
behaviors: [SkylineBehavior],

data: {
duration: 800,
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/loading/_example/duration/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<t-loading
theme="{{ skylineRender ? 'spinner' : 'circular'}}"
theme="circular"
size="52rpx"
text="加载中..."
t-class-text="text-l"
Expand Down
6 changes: 1 addition & 5 deletions packages/components/loading/_example/horizontal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
import SkylineBehavior from '@behaviors/skyline.js';

Component({
behaviors: [SkylineBehavior],
});
Component({});
2 changes: 1 addition & 1 deletion packages/components/loading/_example/horizontal/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 1 addition & 5 deletions packages/components/loading/_example/size/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
import SkylineBehavior from '@behaviors/skyline.js';

Component({
behaviors: [SkylineBehavior],
});
Component({});
6 changes: 3 additions & 3 deletions packages/components/loading/_example/size/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 20 additions & 4 deletions packages/components/loading/loading.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
}

Expand Down
6 changes: 6 additions & 0 deletions packages/tdesign-miniprogram/.changelog/pr-4184.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
pr_number: 4184
contributor: anlyyao
---

- feat(Loading): 支持在 `skyline` 下使用 `circular` 加载类型 @anlyyao ([#4184](https://github.com/Tencent/tdesign-miniprogram/pull/4184))