fix(Progress): prevent animation overflow when status is set to active by aibayanyu20 · Pull Request #56972 · ant-design/ant-design

aibayanyu20 · 2026-02-12T15:04:59Z

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

Fix animation overflow when Progress status is set to "active" by adding overflow: hidden to the rail class.

📝 Change Log

Read Keep a Changelog! Track your changes, like a cat tracks a laser pointer.

Describe the impact of the changes on developers, not the solution approach.

Reference: https://ant.design/changelog

Language	Changelog
🇺🇸 English	Fixed an issue where the animation overflowed when Progress's status was set to "active".
🇨🇳 Chinese	修复 Progress 组件在 `status="active"` 时动画溢出的问题。

bolt-new-by-stackblitz · 2026-02-12T15:05:04Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2026-02-12T15:05:22Z

👁 Visual Regression Report for PR #56972 Failed ❌

🎯 Target branch: master (6915342)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 3 changed

Expected (Branch master)	Actual (Current PR)	Diff
progress-gradient-line.compact.png	progress-gradient-line.compact.png
progress-gradient-line.dark.png	progress-gradient-line.dark.png
progress-gradient-line.default.png	progress-gradient-line.default.png

Important

There are 3 diffs found in this PR: 🔄 3 changed.
Please check all items:

Visual diff is acceptable

github-actions · 2026-02-12T15:05:32Z

gemini-code-assist · 2026-02-12T15:10:13Z

Summary of Changes

Hello @aibayanyu20, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a visual defect in the Progress component where the animation would extend beyond its intended boundaries when the status was set to "active". The fix ensures that the animation is properly contained within the component's visual area, improving the user interface's integrity.

Highlights

Progress Component Bug Fix: Resolved an animation overflow issue in the Progress component when its status was set to "active" by applying overflow: hidden to the rail element's style.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

components/progress/style/index.ts
- Fixed an issue where the animation overflowed when Progress's status was set to "active".

Activity

No human activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request aims to fix an animation overflow issue in the Progress component by adding overflow: hidden. While the fix is effective for the active state animation, applying overflow: hidden unconditionally to the rail introduces a regression. Specifically, it can cause clipping of inner text content when the text is long, as the progress track is designed to expand to fit its content. My review includes a suggestion to apply overflow: hidden conditionally only when the progress status is 'active', which resolves the animation issue without causing the content clipping regression.

pkg-pr-new · 2026-02-12T22:20:44Z

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@56972

commit: c6d5bdd

codecov · 2026-02-12T22:27:58Z

Bundle Report

Changes will decrease total bundle size by 6.1MB (-64.47%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.36MB	-6.1MB (-64.47%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`antd-with-locales.min.js` (New)	1.88MB	1.88MB	100.0% 🚀
`antd.min.js` (New)	1.49MB	1.49MB	100.0% 🚀
~~`antd-with-locales.js`~~ (Deleted)	-5.04MB	0 bytes	-100.0% 🗑️
~~`antd.js`~~ (Deleted)	-4.43MB	0 bytes	-100.0% 🗑️

Files in antd-with-locales.min.js:

./components/progress/style/index.ts → Total Size: 9.03kB

Files in antd.min.js:

./components/progress/style/index.ts → Total Size: 9.03kB

coderabbitai · 2026-02-13T06:16:40Z

📝 Walkthrough

Summary by CodeRabbit

发布说明

Bug 修复
- 修复了进度条组件的样式显示问题，确保进度条内容正确限制在容器范围内，提升用户界面的视觉表现。

Walkthrough

在 Progress 组件的进度条轨道样式中新增 overflow: 'hidden' 属性，防止动画内容溢出容器边界。这是一个纯样式修改，无逻辑变更。

Changes

Cohort / File(s)	Summary
Progress 样式修复 `components/progress/style/index.ts`	为 Line 类型进度条的轨道样式添加 `overflow: 'hidden'` 属性，防止活跃动画效果溢出至容器外部。

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 一条细微的样式线，
防止动画探出视线，
Modal 中舞动不再乱，
进度条乖乖留原地，
整整齐齐真完美！✨

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR标题清晰准确地反映了主要变更，即修复Progress组件在active状态下的动画溢出问题。
Description check	✅ Passed	PR描述详细说明了问题背景、解决方案和变更日志，与代码变更密切相关。
Linked Issues check	✅ Passed	PR通过添加overflow:hidden到rail类样式完全满足#56967中消除动画溢出的需求。
Out of Scope Changes check	✅ Passed	所有代码变更均在范围内，仅在progress/style/index.ts中添加了一行CSS属性来解决动画溢出问题。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into `master`

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-02-13T06:26:03Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (6915342) to head (c6d5bdd).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #56972   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          807       807           
  Lines        15116     15047   -69     
  Branches      3991      3962   -29     
=========================================
- Hits         15116     15047   -69

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

github-actions · 2026-02-13T06:31:55Z

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。

fix: fix progress animation overflow

d467d1b

gemini-code-assist bot reviewed Feb 12, 2026

View reviewed changes

zombieJ approved these changes Feb 13, 2026

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Feb 13, 2026

thinkasany approved these changes Feb 13, 2026

View reviewed changes

Merge branch 'master' into master

c6d5bdd

thinkasany merged commit d271104 into ant-design:master Feb 13, 2026
37 of 38 checks passed

zombieJ mentioned this pull request Feb 24, 2026

docs: changelog of 6.3.1 #57042

Merged

17 tasks

Uh oh!

Conversation

aibayanyu20 commented Feb 12, 2026

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Feb 12, 2026

Uh oh!

github-actions bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #56972 Failed ❌

Uh oh!

github-actions bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Feb 12, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

pkg-pr-new bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

coderabbitai bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

发布说明

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

codecov bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

github-actions bot commented Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Feb 12, 2026 •

edited

Loading

github-actions bot commented Feb 12, 2026 •

edited

Loading

pkg-pr-new bot commented Feb 12, 2026 •

edited

Loading

codecov bot commented Feb 12, 2026 •

edited

Loading

coderabbitai bot commented Feb 13, 2026 •

edited

Loading

codecov bot commented Feb 13, 2026 •

edited

Loading