feat: add indeterminate ProgressCircle by adrienzheng-cb · Pull Request #501 · coinbase/cds

adrienzheng-cb · 2026-03-13T19:17:36Z

What changed? Why?

feat: add indeterminate ProgressCircle, unify progress size and float-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.

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/** or packages/icons/**

verified visreg changes with Terran (include link to visreg run/approval)
all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

cb-heimdall · 2026-03-13T19:17:40Z

✅ Heimdall Review Status

Requirement Status More Info

Reviews

✅ 1/1

Denominator calculation

Show calculation

1 if user is bot 0

1 if user is external 0

2 if repo is sensitive 0

From .codeflow.yml 1

Additional review requirements

Show calculation

Max	0

0

From CODEOWNERS 1

Global minimum 0

Max 1

1

1 if commit is unverified 0

Sum 1

CODEOWNERS ✅ See below

✅ `CODEOWNERS`

Code Owner Status Calculation

ui-systems-eng-team

✅ 1/1

Denominator calculation

Additional CODEOWNERS Requirement

Show calculation

Sum	0

0

From CODEOWNERS 1

Sum 1

packages/common/src/visualizations/getProgressSize.ts

packages/mobile/src/visualizations/ProgressBarWithFloatLabel.tsx

packages/mobile/src/visualizations/ProgressCircle.tsx

hcopp · 2026-03-13T20:48:27Z

packages/mobile/src/buttons/Button.tsx

+              color={colorValue}
+              size={progressCircleHeight}
+              weight="thin"
+            />


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?)

depends if we want to merge this pr before or after v9

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.

Would it be bad to have a loadingSpinnerSize prop or something similar on ButtonBaseProps (and include for IconButton? Or does that feel weird? We could also expose a node prop for this , such as loadingNode or something.

Advanced hoping to adjust size here and I'm wondering if possible, although in v9 with it being padding maybe the size prop doesn't make as much sense, vs a node for overriding.

Also if we say this isn't worth it then that's fine!

I added progressCircleSize prop to both Button and IconButton.

packages/mobile/src/visualizations/DefaultProgressCircleContent.tsx

packages/web/src/visualizations/ProgressBar.tsx

hcopp · 2026-03-13T20:59:37Z

Great work! Excited to see this when it's fully ready.

packages/common/src/visualizations/useProgressSize.ts

…-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.

github-actions · 2026-03-29T18:08:43Z

https://percy.io/d424b72f/web/cds-mobile-visreg-03c97426/builds/48237895

hcopp

Looks great, thanks for being thorough!

* feat: add indeterminate ProgressCircle (#501) * feat: add indeterminate ProgressCircle, unify progress size and float-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. * update test and deprecation message * add more button stories * a11y fix * remove 0.11 * add progressCircleSize prop * update changelogs and package versions * add progressCircleSize prop to IconButton * fix removal version * chore: deprecate CardGroup (#560) * chore: deprecate CardGroup * Update changelog * feat: added cds skills for distribution (#561) * chore: deprecate old card (#562) * chore: deprecate old card 1. derpecated Card and related components and types 2. added derepcate-cds-api-skill * update changelogs * tweaks --------- Co-authored-by: Hunter Copp <huntercolecopp@gmail.com> Co-authored-by: Harry <ruikun.hao@coinbase.com>

adrienzheng-cb requested a review from hcopp March 13, 2026 19:17

adrienzheng-cb temporarily deployed to production March 13, 2026 19:17 — with GitHub Actions Inactive

adrienzheng-cb marked this pull request as draft March 13, 2026 19:17

github-actions bot added packages:common packages:web packages:mobile packages:ui-mobile-playground labels Mar 13, 2026

adrienzheng-cb commented Mar 13, 2026

View reviewed changes

packages/common/src/visualizations/getProgressSize.ts Show resolved Hide resolved

adrienzheng-cb commented Mar 13, 2026

View reviewed changes

packages/mobile/src/visualizations/ProgressBarWithFloatLabel.tsx Show resolved Hide resolved

adrienzheng-cb commented Mar 13, 2026

View reviewed changes

packages/mobile/src/visualizations/ProgressCircle.tsx Show resolved Hide resolved

adrienzheng-cb temporarily deployed to production March 13, 2026 20:06 — with GitHub Actions Inactive

hcopp reviewed Mar 13, 2026

View reviewed changes

packages/mobile/src/visualizations/DefaultProgressCircleContent.tsx Show resolved Hide resolved

hcopp reviewed Mar 13, 2026

View reviewed changes

packages/web/src/visualizations/ProgressBar.tsx Outdated Show resolved Hide resolved

adrienzheng-cb force-pushed the adrien/indeterminate-progress-circle branch from 51d9266 to 3cd6279 Compare March 17, 2026 14:39

adrienzheng-cb had a problem deploying to production March 17, 2026 14:39 — with GitHub Actions Failure

github-actions bot added the apps:docs label Mar 17, 2026

adrienzheng-cb had a problem deploying to production March 17, 2026 15:33 — with GitHub Actions Failure

adrienzheng-cb had a problem deploying to production March 18, 2026 19:47 — with GitHub Actions Failure

adrienzheng-cb force-pushed the adrien/indeterminate-progress-circle branch from ec42a2a to 1b026ee Compare March 24, 2026 17:47

adrienzheng-cb temporarily deployed to production March 24, 2026 17:47 — with GitHub Actions Inactive

adrienzheng-cb temporarily deployed to production March 24, 2026 18:50 — with GitHub Actions Inactive

adrienzheng-cb force-pushed the adrien/indeterminate-progress-circle branch from 01c655f to 1146e85 Compare March 26, 2026 16:15

adrienzheng-cb temporarily deployed to production March 26, 2026 16:15 — with GitHub Actions Inactive

adrienzheng-cb temporarily deployed to production March 26, 2026 18:17 — with GitHub Actions Inactive

adrienzheng-cb force-pushed the adrien/indeterminate-progress-circle branch from ecf32ca to 83f3dee Compare March 27, 2026 16:34

adrienzheng-cb temporarily deployed to production March 27, 2026 16:34 — with GitHub Actions Inactive

github-actions bot added the packages:mcp-server label Mar 27, 2026

adrienzheng-cb marked this pull request as ready for review March 27, 2026 16:35

adrienzheng-cb temporarily deployed to production March 27, 2026 16:59 — with GitHub Actions Inactive

adrienzheng-cb had a problem deploying to production March 27, 2026 16:59 — with GitHub Actions Failure

hcopp reviewed Mar 27, 2026

View reviewed changes

packages/common/src/visualizations/useProgressSize.ts Show resolved Hide resolved

adrienzheng-cb temporarily deployed to production March 27, 2026 21:56 — with GitHub Actions Inactive

adrienzheng-cb had a problem deploying to production March 27, 2026 21:56 — with GitHub Actions Failure

adrienzheng-cb had a problem deploying to production March 27, 2026 22:36 — with GitHub Actions Failure

adrienzheng-cb temporarily deployed to production March 27, 2026 22:36 — with GitHub Actions Inactive

adrienzheng-cb added 7 commits March 29, 2026 13:47

update test and deprecation message

4b1fa0e

add more button stories

f77b50d

a11y fix

92bb493

remove 0.11

f002cae

add progressCircleSize prop

8e6acd2

update changelogs and package versions

8540288

adrienzheng-cb force-pushed the adrien/indeterminate-progress-circle branch from e36c29b to 8540288 Compare March 29, 2026 17:51

adrienzheng-cb had a problem deploying to production March 29, 2026 17:51 — with GitHub Actions Error

add progressCircleSize prop to IconButton

8d1105c

adrienzheng-cb had a problem deploying to production March 29, 2026 17:56 — with GitHub Actions Error

fix removal version

c64450c

adrienzheng-cb temporarily deployed to production March 29, 2026 17:58 — with GitHub Actions Inactive

adrienzheng-cb requested a review from hcopp March 29, 2026 18:24

hcopp approved these changes Mar 29, 2026

View reviewed changes

adrienzheng-cb merged commit cfc7c5e into master Mar 29, 2026
33 checks passed

adrienzheng-cb deleted the adrien/indeterminate-progress-circle branch March 29, 2026 21:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add indeterminate ProgressCircle#501

feat: add indeterminate ProgressCircle#501
adrienzheng-cb merged 9 commits intomasterfrom
adrien/indeterminate-progress-circle

adrienzheng-cb commented Mar 13, 2026 •

edited

Loading

Uh oh!

cb-heimdall commented Mar 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hcopp Mar 13, 2026

Uh oh!

adrienzheng-cb Mar 17, 2026

Uh oh!

adrienzheng-cb Mar 24, 2026

Uh oh!

hcopp Mar 27, 2026

Uh oh!

adrienzheng-cb Mar 29, 2026

Uh oh!

Uh oh!

Uh oh!

hcopp commented Mar 13, 2026

Uh oh!

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

hcopp left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Conversation

adrienzheng-cb commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed? Why?

Root cause (required for bugfixes)

UI changes

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Change management

Uh oh!

cb-heimdall commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Heimdall Review Status

✅ CODEOWNERS

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hcopp Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

adrienzheng-cb Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

adrienzheng-cb Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

hcopp Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

adrienzheng-cb Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

hcopp commented Mar 13, 2026

Uh oh!

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

hcopp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

adrienzheng-cb commented Mar 13, 2026 •

edited

Loading

cb-heimdall commented Mar 13, 2026 •

edited

Loading

✅ `CODEOWNERS`