feat: add indeterminate ProgressCircle#501
Draft
adrienzheng-cb wants to merge 2 commits intomasterfrom
Draft
Conversation
Collaborator
🟡 Heimdall Review Status
🟡
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
🟡
0/1
|
Denominator calculation
|
adrienzheng-cb
temporarily deployed
to
production
GitHub Actions
Inactive
adrienzheng-cb
commented
Mar 13, 2026
adrienzheng-cb
commented
Mar 13, 2026
adrienzheng-cb
commented
Mar 13, 2026
adrienzheng-cb
temporarily deployed
to
production
GitHub Actions
Inactive
hcopp
reviewed
Mar 13, 2026
| color={colorValue} | ||
| size={progressCircleHeight} | ||
| weight="thin" | ||
| /> |
Contributor
There was a problem hiding this comment.
How easy do you think it would be to have this value not be hardcoded? Particularly for v9 branch. I guess wed need text to be hidden still and then somehow have this be 100% height (If possible?)
Contributor
Author
There was a problem hiding this comment.
depends if we want to merge this pr before or after v9
Contributor
Author
There was a problem hiding this comment.
since we are pushing back the release of v9. we should merge this change in v8. I'll then remove the fixed height in cds-v9 branch following the new pattern after sync.
hcopp
reviewed
Mar 13, 2026
hcopp
reviewed
Mar 13, 2026
Contributor
|
Great work! Excited to see this when it's fully ready. |
adrienzheng-cb
force-pushed
the
adrien/indeterminate-progress-circle
branch
from
51d9266 to
3cd6279
Compare
adrienzheng-cb
had a problem deploying
to
production
GitHub Actions
Failure
adrienzheng-cb
had a problem deploying
to
production
GitHub Actions
Failure
adrienzheng-cb
had a problem deploying
to
production
GitHub Actions
Failure
…-label math - Add indeterminate prop to ProgressCircle (web & mobile): spinning state with configurable weight, default stroke ratio 0.11; animate full SVG on mobile, CSS keyframes on web; hide default content when indeterminate. - Add getProgressSize(weight) in common and deprecate useProgressSize; use getProgressSize in ProgressBar and ProgressCircle on both platforms. - Simplify ProgressBarWithFloatLabel (web & mobile): remove usePreviousValues, useIsoEffect, and imperative animation; use shared getEndTranslateX so float label trailing edge follows fill end (containerWidth * progress - textWidth); web uses useMotionProps + MotionBox, mobile animates translateX to target. - ProgressBar/ProgressCircle: progress optional with default 0; add originX/ originY in getProgressCircleParams; web ProgressCircle uses pathLength=1. - Deprecate Spinner (web & mobile) in favor of indeterminate ProgressCircle. - ProgressBar tests: update float-label position expectation (80) and accept transform none/translateX(0) for zero progress; iconSvgMap regenerated.
adrienzheng-cb
force-pushed
the
adrien/indeterminate-progress-circle
branch
from
ec42a2a to
1b026ee
Compare
adrienzheng-cb
temporarily deployed
to
production
GitHub Actions
Inactive
adrienzheng-cb
temporarily deployed
to
production
GitHub Actions
Inactive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed? Why?
feat: add indeterminate ProgressCircle, unify progress size and float-label math
configurable weight, default stroke ratio 0.11; animate full SVG on mobile,
CSS keyframes on web; hide default content when indeterminate.
getProgressSize in ProgressBar and ProgressCircle on both platforms.
useIsoEffect, and imperative animation; use shared getEndTranslateX so float
label trailing edge follows fill end (containerWidth * progress - textWidth);
web uses useMotionProps + MotionBox, mobile animates translateX to target.
originY in getProgressCircleParams; web ProgressCircle uses pathLength=1.
transform none/translateX(0) for zero progress; iconSvgMap regenerated.
The look of indeterminate ProgressCircle is based on the loading Button figma design
Root cause (required for bugfixes)
UI changes
storybook
docs
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2026-03-17.at.12.02.31.mov
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2026-03-17.at.12.01.33.mov
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2026-03-17.at.12.03.13.mov
Testing
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false