Progress indicators
Linear and circular progress indicators (COMPONENT_SPEC §8; Compose LinearProgressIndicator, CircularProgressIndicator, LinearWavyProgressIndicator, CircularWavyProgressIndicator), flat or wavy, determinate or indeterminate, in the default 4dp or the thick 8dp configuration. Flat indicators are plain HTML with m3e-css classes, indeterminate ones included (CSS keyframes); the value is --m3e-comp-progress-indicator-value (0–1) next to aria-valuenow. Wavy ones are drawn by <m3e-linear-progress> / <m3e-circular-progress> and <LinearProgress> / <CircularProgress> (React), which also run value changes on Compose's progress spring.
Linear, flat (CSS only)
The track starts after a gap of min(progress, 4dp); the stop indicator marks the end. Indeterminate: two lines run Compose's keyframes on a 1750ms cycle.
Circular, flat (CSS only)
From 12 o'clock, clockwise; the track follows after the gap. Indeterminate: no track, the arc rotates (1080° plus a 90° step every 1.5s) and sweeps between 10% and 87% on a 6s cycle.
Wavy (custom elements)
<m3e-linear-progress shape="wavy" value="0.4"> and <m3e-circular-progress>: the wave travels one wavelength per second (it holds still with prefers-reduced-motion); determinate waves flatten at ≤ 10% and ≥ 95%, tweening their amplitude. The circular wave is a star with one point per 15dp of circumference, morphed from the track's circle.
Right to left
Linear indicators mirror; circular ones do not (m3.material.io).
Value changes
Setting value springs to it on ProgressIndicatorDefaults.ProgressAnimationSpec (damping 1, stiffness 50; interrupted changes keep their velocity).
React
<LinearProgress value shape thickness amplitude wavelength waveSpeed aria-label /> and <CircularProgress …/>.