Skip to content

feat: modernize progress indicators #4971

Description

@adrcotfas
  • Modernize progress indicators according to the MD3 Specs and reuse existing MD theme foundation tokens (motion, shape etc) where appropriate.
  • Extract component tokens to a separate file for easier maintenance

Current State

Existing "Activity Indicator" and "Progress Bar" components correspond to MD3 Progress Indicators.

Activity Indicator

MD3 spec: Progress indicators (Circular)
Specs link: https://m3.material.io/components/progress-indicators/specs

Color tokens

  • No track color. MD3 requires a track arc behind the indicator (token: secondaryContainer); only primary is rendered

Spacing / sizing

  • Stroke width is size / 10 (2.4dp @ small, 4.8dp @ large). MD3 specifies a fixed 4dp stroke for both indicator and track

Behavior

  • Arc ends are square (border clipping technique). MD3 requires rounded stroke caps
  • No track rendered. MD3 always shows the inactive track arc
  • M3 Expressive wavy circular and linear indicators not implemented

Notes

  • Rename to match MD3: CircularProgressIndicator and move to a “Progress Indicators” directory together with Linear Progress Indicator.
  • Entire rendering approach is MD2-era (two clipped half-border views). MD3-compliant implementation needs SVG or canvas-based arc for rounded caps and track

Progress Bar

MD3 spec: Linear progress indicator
Specs link: https://m3.material.io/components/progress-indicators/specs

Color tokens

  • Active indicator: color || theme.colors.primary
  • Track: theme.colors.surfaceVariant; spec requires secondaryContainer
  • No stop indicator rendered; spec defines a stop indicator at 100% (color primary)

Spacing / sizing

  • Height: 4dp ✅
  • Track has no borderRadius; spec corner.full requires borderRadius: 2 for 4dp height
  • Active indicator fill has no borderRadius; same issue as track
  • No 4dp horizontal inset from screen edges; spec shows 4dp padding on each side
  • Configurable thickness not supported (M3 Expressive)
  • Wavy shape (amplitude 3dp, wavelength 40dp, height 10dp) not supported (M3 Expressive)

Behavior

  • Determinate mode: progress value animates via scaleX
  • Indeterminate mode: looping translate + scaleX animation ✅
  • Visibility fade in/out ✅
  • RTL support ✅
  • Stop indicator not shown at the end of the track

Notes

  • Should be renamed LinearProgressIndicator and placed in a shared ProgressIndicator/ directory alongside ActivityIndicator (circular), matching MD3 naming
  • ProgressBar name and the color prop (which bypasses the token system) are library-level issues to address at rename time

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions