Material Design 3 "Progress Indicator" tokens: All tokens
Preview
Browse tokens
Color
Progress Indicator - Common
Color
| Token | Value |
|---|---|
Progress indicator active indicator colormd.comp.progress-indicator.active-indicator.color | #6750A4 md.comp.progress-indicator.active-indicator.color
|
Progress indicator stop indicator colormd.comp.progress-indicator.stop-indicator.color | #6750A4 md.comp.progress-indicator.stop-indicator.color
|
Progress indicator track colormd.comp.progress-indicator.track.color | #E8DEF8 md.comp.progress-indicator.track.color
|
Shape
| Token | Value |
|---|---|
Progress indicator active indicator shapemd.comp.progress-indicator.active-indicator.shape | Full md.comp.progress-indicator.active-indicator.shape
|
Progress indicator stop indicator shapemd.comp.progress-indicator.stop-indicator.shape | Full md.comp.progress-indicator.stop-indicator.shape
|
Progress indicator track shapemd.comp.progress-indicator.track.shape | Full md.comp.progress-indicator.track.shape
|
[Deprecated] Enabled
[Deprecated] Active Indicator
| Token | Value |
|---|---|
Active indicator thicknessmd.comp.progress-indicator.active-indicator.thickness | 4dp md.comp.progress-indicator.active-indicator.thickness |
[Deprecated] Track
| Token | Value |
|---|---|
Track thicknessmd.comp.progress-indicator.track.thickness | 4dp md.comp.progress-indicator.track.thickness |
[Deprecated] Stop indicator
| Token | Value |
|---|---|
Stop indicator sizemd.comp.progress-indicator.stop-indicator.size | 4dp md.comp.progress-indicator.stop-indicator.size |
[Deprecated] Spacing
| Token | Value |
|---|---|
Spacing between active indicator and trackmd.comp.progress-indicator.active-indicator-track-space | 4dp md.comp.progress-indicator.active-indicator-track-space |
Progress indicator - Circular
Circular - baseline
| Token | Value |
|---|---|
Progress indicator circular active indicator thicknessmd.comp.progress-indicator.circular.active-indicator.thickness | 4dp md.comp.progress-indicator.circular.active-indicator.thickness |
Progress indicator circular active indicator wave amplitudemd.comp.progress-indicator.circular.active-indicator.wave.amplitude | 1.6dp md.comp.progress-indicator.circular.active-indicator.wave.amplitude |
Progress indicator circular active indicator wave wavelengthmd.comp.progress-indicator.circular.active-indicator.wave.wavelength | 15dp md.comp.progress-indicator.circular.active-indicator.wave.wavelength |
Progress indicator circular sizemd.comp.progress-indicator.circular.size | 40dp md.comp.progress-indicator.circular.size |
Progress indicator circular track active indicator spacemd.comp.progress-indicator.circular.track-active-indicator-space | 4dp md.comp.progress-indicator.circular.track-active-indicator-space
|
Progress indicator circular track thicknessmd.comp.progress-indicator.circular.track.thickness | 4dp md.comp.progress-indicator.circular.track.thickness |
Progress indicator circular size with wavemd.comp.progress-indicator.circular.with-wave.size | 48dp md.comp.progress-indicator.circular.with-wave.size |
[Deprecated] Circular - thick
| Token | Value |
|---|---|
Progress indicator circular thick active indicator thicknessmd.comp.progress-indicator.circular.thick.active-indicator.thickness | 8dp md.comp.progress-indicator.circular.thick.active-indicator.thickness |
Progress indicator circular thick sizemd.comp.progress-indicator.circular.thick.size | 52dp md.comp.progress-indicator.circular.thick.size |
Progress indicator circular thick track active indicator spacemd.comp.progress-indicator.circular.thick.track-active-indicator-space | 4dp md.comp.progress-indicator.circular.thick.track-active-indicator-space |
Progress indicator circular thick track thicknessmd.comp.progress-indicator.circular.thick.track.thickness | 8dp md.comp.progress-indicator.circular.thick.track.thickness |
Progress indicator - Linear
Linear - baseline
| Token | Value |
|---|---|
Progress indicator linear active indicator thicknessmd.comp.progress-indicator.linear.active-indicator.thickness | 4dp md.comp.progress-indicator.linear.active-indicator.thickness |
Progress indicator linear wave amplitudemd.comp.progress-indicator.linear.active-indicator.wave.amplitude | 3dp md.comp.progress-indicator.linear.active-indicator.wave.amplitude |
Progress indicator linear wave wavelenghtmd.comp.progress-indicator.linear.active-indicator.wave.wavelength | 40dp md.comp.progress-indicator.linear.active-indicator.wave.wavelength |
Progress indicator linear heightmd.comp.progress-indicator.linear.height | 4dp md.comp.progress-indicator.linear.height |
Progress indicator linear indeterminate wave wavelength md.comp.progress-indicator.linear.indeterminate.active-indicator.wave.wavelength | 20dp md.comp.progress-indicator.linear.indeterminate.active-indicator.wave.wavelength |
Progress indicator linear stop indicator sizemd.comp.progress-indicator.linear.stop-indicator.size | 4dp md.comp.progress-indicator.linear.stop-indicator.size |
Progress indicator linear stop indicator trailing spacemd.comp.progress-indicator.linear.stop-indicator.trailing-space | 0dp md.comp.progress-indicator.linear.stop-indicator.trailing-space
|
Progress indicator linear track active indicator spacemd.comp.progress-indicator.linear.track-active-indicator-space | 4dp md.comp.progress-indicator.linear.track-active-indicator-space
|
Progress indicator linear track thicknessmd.comp.progress-indicator.linear.track.thickness | 4dp md.comp.progress-indicator.linear.track.thickness |
Progress indicator linear with wave heightmd.comp.progress-indicator.linear.with-wave.height | 10dp md.comp.progress-indicator.linear.with-wave.height |
[Deprecated] Linear - thick
| Token | Value |
|---|---|
Progress indicator linear thick with wave heightmd.comp.progress-indicator.linear.thick.active-indicator.thickness | 8dp md.comp.progress-indicator.linear.thick.active-indicator.thickness |
Progress indicator linear thick heightmd.comp.progress-indicator.linear.thick.height | 8dp md.comp.progress-indicator.linear.thick.height |
Progress indicator linear thick stop indicator sizemd.comp.progress-indicator.linear.thick.stop-indicator.size | 4dp md.comp.progress-indicator.linear.thick.stop-indicator.size |
Progress indicator linear thick stop indicator trailing spacemd.comp.progress-indicator.linear.thick.stop-indicator.trailing-space | 2dp md.comp.progress-indicator.linear.thick.stop-indicator.trailing-space |
Progress indicator linear thick track active indicator spacemd.comp.progress-indicator.linear.thick.track-active-indicator-space | 4dp md.comp.progress-indicator.linear.thick.track-active-indicator-space |
Progress indicator linear thick track thicknessmd.comp.progress-indicator.linear.thick.track.thickness | 8dp md.comp.progress-indicator.linear.thick.track.thickness |
Progress indicator linear thick active indicator thicknessmd.comp.progress-indicator.linear.thick.with-wave.height | 14dp md.comp.progress-indicator.linear.thick.with-wave.height |
[Deprecated] Progress indicator - Circular
[Deprecated] Enabled
[Deprecated] Active indicator
| Token | Value |
|---|---|
Circular progress indicator active indicator colormd.comp.circular-progress-indicator.active-indicator.color | #6750A4 md.comp.circular-progress-indicator.active-indicator.color
|
Circular progress indicator active indicator shapemd.comp.circular-progress-indicator.active-indicator.shape | 0dp md.comp.circular-progress-indicator.active-indicator.shape
|
Circular progress indicator active indicator widthmd.comp.circular-progress-indicator.active-indicator.width | 4dp md.comp.circular-progress-indicator.active-indicator.width |
Circular progress indicator four color active indicator four colormd.comp.circular-progress-indicator.four-color.active-indicator.four.color | #FFD8E4 md.comp.circular-progress-indicator.four-color.active-indicator.four.color
|
Circular progress indicator four color active indicator one colormd.comp.circular-progress-indicator.four-color.active-indicator.one.color | #6750A4 md.comp.circular-progress-indicator.four-color.active-indicator.one.color
|
Circular progress indicator four color active indicator three colormd.comp.circular-progress-indicator.four-color.active-indicator.three.color | #7D5260 md.comp.circular-progress-indicator.four-color.active-indicator.three.color
|
Circular progress indicator four color active indicator two colormd.comp.circular-progress-indicator.four-color.active-indicator.two.color | #EADDFF md.comp.circular-progress-indicator.four-color.active-indicator.two.color
|
Circular progress indicator active indicator sizemd.comp.circular-progress-indicator.size | 48dp md.comp.circular-progress-indicator.size |
[Deprecated] Progress indicator - Linear
[Deprecated] Enabled
[Deprecated] Track
| Token | Value |
|---|---|
Linear progress indicator track colormd.comp.linear-progress-indicator.track.color | #E6E0E9 md.comp.linear-progress-indicator.track.color
|
Linear progress indicator track heightmd.comp.linear-progress-indicator.track.height | 4dp md.comp.linear-progress-indicator.track.height |
Linear progress indicator track shapemd.comp.linear-progress-indicator.track.shape | 0dp md.comp.linear-progress-indicator.track.shape
|
[Deprecated] Active indicator
| Token | Value |
|---|---|
Linear progress indicator active indicator colormd.comp.linear-progress-indicator.active-indicator.color | #6750A4 md.comp.linear-progress-indicator.active-indicator.color
|
Linear progress indicator active indicator heightmd.comp.linear-progress-indicator.active-indicator.height | 4dp md.comp.linear-progress-indicator.active-indicator.height |
Linear progress indicator active indicator shapemd.comp.linear-progress-indicator.active-indicator.shape | 0dp md.comp.linear-progress-indicator.active-indicator.shape
|
Linear progress indicator four color active indicator four colormd.comp.linear-progress-indicator.four-color.active-indicator.four.color | #FFD8E4 md.comp.linear-progress-indicator.four-color.active-indicator.four.color
|
Linear progress indicator four color active indicator one colormd.comp.linear-progress-indicator.four-color.active-indicator.one.color | #6750A4 md.comp.linear-progress-indicator.four-color.active-indicator.one.color
|
Linear progress indicator four color active indicator three colormd.comp.linear-progress-indicator.four-color.active-indicator.three.color | #7D5260 md.comp.linear-progress-indicator.four-color.active-indicator.three.color
|
Linear progress indicator four color active indicator two colormd.comp.linear-progress-indicator.four-color.active-indicator.two.color | #EADDFF md.comp.linear-progress-indicator.four-color.active-indicator.two.color
|