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;
}

CircularProgressIndicator

CircularProgressIndicator displays determinate or indeterminate progress around a circular track.

Anatomy

Highlight

Element	Part	Selector
`<div>`	root	`[data-scope="circular-progress-indicator"][data-part="root"]` `left_clickLMB`Copy
`<svg>`	svg	`[data-scope="circular-progress-indicator"][data-part="svg"]` `left_clickLMB`Copy
`<path>`	trackconditional	`[data-scope="circular-progress-indicator"][data-part="track"]` `left_clickLMB`Copy
`<path>`	active-indicatorconditional	`[data-scope="circular-progress-indicator"][data-part="active-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	Direction used to draw the active indicator. `clockwisecounterclockwise`	`"clockwise"`	clockwisecounterclockwise
`shape`Optional	Visual shape of the active indicator. `flatwavy`	`"flat"`	flatwavy
`size`Optional	CSS length used for the component size. `string \| undefined`	-
`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`	-
`waveAmplitude`Optional	CSS length used for the wavy active indicator amplitude. `string \| undefined`	-
`wavelength`Optional	CSS length used for the 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.

Styling10

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-circular-progress-indicator-active-indicator-color`Color Fallback`var(--md-progress-indicator-color)`	Active arc color for the circular indicator.
`--md-circular-progress-indicator-track-color`Color Fallback`var(--md-progress-indicator-track-color)`	Track arc color for the circular indicator.
`--md-circular-progress-indicator-size`Layout Fallback`--dp(40)`	Default size for the circular indicator.
`--md-circular-progress-indicator-with-wave-size`Layout Fallback`--dp(48)`	Default size when using the wavy shape.
`--md-circular-progress-indicator-track-thickness`Layout Fallback`--dp(4)`	Stroke thickness for track and active arcs.
`--md-circular-progress-indicator-track-active-indicator-gap`Layout Fallback`--dp(4)`	Gap between active arc and track arc.
`--md-circular-progress-indicator-wave-amplitude`Wave Fallback`--dp(1.6)`	Amplitude for the wavy active arc.
`--md-circular-progress-indicator-wave-wavelength`Wave Fallback`--dp(15)`	Wavelength for the wavy active arc.

Examples

Default

Value animation

8%

Indeterminate