Skip to content
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.

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

[material-ui][CircularProgress] Improve indeterminate animation to be symmetric and smooth #44934

Merged
merged 1 commit into from
Jan 6, 2025

Conversation

yashdev16
Copy link
Contributor

@yashdev16 yashdev16 commented Jan 3, 2025

Closes: #44915

Changes Made:

Updated the @Keyframes circular-rotate animation in CircularProgress.js:
Changed the stroke-dasharray value from 100px to 1px for the 100% keyframe.
Adjusted the stroke-dashoffset value to -126px for greater precision.

Before:

The animation shows an odd "jump" as the arc moves quickly and then stops suddenly between the 50% and 100% phases.

After:

The animation is smooth and symmetric, with the arc contracting back to 1px between the 50% and 100% phases.

@mui-bot
Copy link

mui-bot commented Jan 3, 2025

Netlify deploy preview

https://deploy-preview-44934--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against e78d580

@zannager zannager added the component: CircularProgress The React component label Jan 4, 2025
@zannager zannager requested a review from DiegoAndai January 4, 2025 05:49
@DiegoAndai DiegoAndai changed the title Fix indeterminate CircularProgress animation to be symmetric and smooth [material-ui][CircularProgress] Improve indeterminate animation to be symmetric and smooth Jan 6, 2025
@DiegoAndai DiegoAndai added the enhancement This is not a bug, nor a new feature label Jan 6, 2025
@DiegoAndai DiegoAndai requested review from zanivan and removed request for DiegoAndai January 6, 2025 12:29
@DiegoAndai
Copy link
Member

@zanivan may I ask you to review this one?

Copy link
Contributor

@zanivan zanivan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @yashdev16 this looks smooth! Thanks for the improvement 🚀

@zanivan zanivan merged commit 4bcf3cc into mui:master Jan 6, 2025
20 of 21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: CircularProgress The React component enhancement This is not a bug, nor a new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[material-ui][CircularProgress] Indeterminate animation is not symmetric and smooth (with fix proposal)
5 participants