Shape

Action--md-shape-action28pxButton, IconButton, ButtonGroup, Select, DatePicker actions, FAB menu actions

Field--md-shape-field16pxTextField rounded containers

Field square--md-shape-field-square12pxTextField square containers, InputOtp inputs

Chip--md-shape-chip8pxChip, Menu inactive containers, Tabs active tonal containers, TimePicker fields

Card--md-shape-card12pxCard, rich Tooltip, Tabs tonal containers and focus indicators

Popover--md-shape-popover16pxMenu surfaces, active menu containers, detached SideSheet surfaces

Compact--md-shape-compact4pxSnackbar and plain Tooltip surfaces

Overlay--md-shape-overlay28pxDialog, DatePicker surfaces, TimePicker surfaces

Indicator--md-shape-indicatorfullLinearProgressIndicator, LoadingIndicator, NavigationRail active indicators, ListItem indicators

FAB--md-shape-fab16pxFloatingActionButton and FloatingActionButtonMenu triggers

CSS

:root {
  --md-shape-action: 28px;
  --md-shape-field: 16px;
  --md-shape-field-square: 12px;
  --md-shape-chip: 8px;
  --md-shape-card: 12px;
  --md-shape-popover: 16px;
  --md-shape-compact: 4px;
  --md-shape-overlay: 28px;
  --md-shape-indicator: 9999px;
  --md-shape-fab: 16px;
}

LinearProgressIndicator

LinearProgressIndicator displays determinate or indeterminate progress on a horizontal track.

Anatomy

Highlight

Element	Part	Selector
`<div>`	root	`[data-scope="linear-progress-indicator"][data-part="root"]` `left_clickLMB`Copy
`<div>`	viewport	`[data-scope="linear-progress-indicator"][data-part="viewport"]` `left_clickLMB`Copy
`<div>`	track	`[data-scope="linear-progress-indicator"][data-part="track"]` `left_clickLMB`Copy
`<div>`	active-indicator	`[data-scope="linear-progress-indicator"][data-part="active-indicator"]` `left_clickLMB`Copy
`<span>`	active-indicator-flat	`[data-scope="linear-progress-indicator"][data-part="active-indicator-flat"]` `left_clickLMB`Copy
`<svg>`	active-indicator-wavyconditional	`[data-scope="linear-progress-indicator"][data-part="active-indicator-wavy"]` `left_clickLMB`Copy
`<div>`	stop-indicatorconditional	`[data-scope="linear-progress-indicator"][data-part="stop-indicator"]` `left_clickLMB`Copy

Props

Name	Description	Default	Control
`indeterminate`Optional	Whether the progress value is unknown. `boolean \| undefined`	`false`
`value`Optional	Current progress value. `number \| undefined`	`0`
`min`Optional	Minimum progress value. `number \| undefined`	`0`
`max`Optional	Maximum progress value. `number \| undefined`	`1`
`direction`Optional	Drawing direction for the visual indicator. `ltrrtl`	`"ltr"`	ltrrtl
`shape`Optional	Visual shape of the active indicator. `flatwavy`	`"flat"`	flatwavy
`thickness`Optional	CSS length used for the track and active indicator thickness. `string \| undefined`	-
`trackGap`Optional	CSS length used for the gap between active indicator and track. `string \| undefined`	-
`stopIndicator`Optional	Whether to draw the linear stop indicator at the track end. `boolean \| undefined`	`true`
`stopIndicatorSize`Optional	CSS length used for the stop indicator size. `string \| undefined`	-
`waveAmplitude`Optional	CSS length used for the wavy active indicator amplitude. `string \| undefined`	-
`wavelength`Optional	CSS length used for the determinate wavy active indicator wavelength. `string \| undefined`	-
`indeterminateWavelength`Optional	CSS length used for the indeterminate wavy active indicator wavelength. `string \| undefined`	-
`ariaLabel`Optional	Accessible label. `string \| undefined`	-	-
`ariaValueText`Optional	Accessible value text. Defaults to a percentage for determinate progress. `string \| undefined`	-	-

Events0

No events documented.

Slots0

No slots documented.

Styling14

Preview

Token	Description
`--md-progress-indicator-color`Color Fallback`var(--md-color-on-container, var(--md-sys-color-primary))`	Shared active indicator color for progress indicators.
`--md-progress-indicator-track-color`Color Fallback`var(--md-color-container, var(--md-sys-color-secondary-container))`	Shared track color for progress indicators.
`--md-progress-indicator-stop-indicator-color`Color Fallback`var(--md-progress-indicator-color)`	Shared stop indicator color for linear progress.
`--md-linear-progress-indicator-active-indicator-color`Color Fallback`var(--md-progress-indicator-color)`	Active segment color for the linear indicator.
`--md-linear-progress-indicator-track-color`Color Fallback`var(--md-progress-indicator-track-color)`	Track color for the linear indicator.
`--md-linear-progress-indicator-stop-indicator-color`Color Fallback`var(--md-progress-indicator-stop-indicator-color)`	Stop indicator color for determinate linear progress.
`--md-linear-progress-indicator-track-thickness`Layout Fallback`--dp(4)`	Height of the track and active segment.
`--md-linear-progress-indicator-track-active-indicator-gap`Layout Fallback`--dp(4)`	Gap between active segment and track in determinate partial state.
`--md-linear-progress-indicator-stop-indicator-size`Layout Fallback`--dp(4)`	Size of the stop indicator dot.
`--md-linear-progress-indicator-shape`Shape Fallback`var(--md-shape-indicator)`	Corner radius for track, active segment, and stop indicator.
`--md-linear-progress-indicator-wave-amplitude`Wave Fallback`--dp(3)`	Amplitude for the wavy active segment.
`--md-linear-progress-indicator-wave-wavelength`Wave Fallback`--dp(40)`	Wavelength for determinate wavy progress.
`--md-linear-progress-indicator-indeterminate-wave-wavelength`Wave Fallback`--dp(20)`	Wavelength for indeterminate wavy progress.
`--md-linear-progress-indicator-with-wave-height`Wave Fallback`--dp(10)`	Minimum height when using the wavy shape.

Examples

Default

Value animation

8%

Indeterminate