Customize

DefaultCompact

Theme color

Density

Negative values compress; positive values add space.

Field row gap

Field column gap

Apply these gaps to the parent layout using the example in Code.

Icon size multiplier

Icon source content ratio

Shared appearance

main.ts

import { createApp } from 'vue';
import { M3VuePlugin } from '@chillet/m3-vue';
import App from './App.vue';
import '@chillet/m3-vue/style.css';
import { defaultPreset } from '@chillet/m3-vue/presets/default';

const app = createApp(App);
app.use(M3VuePlugin, {
  "preset": defaultPreset
});
app.mount('#app');

customization.css

The imported theme already provides these styles.

CircularProgressIndicator

CircularProgressIndicator displays determinate or indeterminate progress around a circular track.

Examples

Default

Value animation

8%

Indeterminate

Reference

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`	-	-

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`40dp × typography/density scale`	Default size for the circular indicator.
`--md-circular-progress-indicator-with-wave-size`Layout Fallback`48dp × typography/density scale`	Default size when using the wavy shape.
`--md-circular-progress-indicator-track-thickness`Layout Fallback`4dp × typography/density scale`	Stroke thickness for track and active arcs.
`--md-circular-progress-indicator-track-active-indicator-gap`Layout Fallback`4dp × typography/density scale`	Gap between active arc and track arc.
`--md-circular-progress-indicator-wave-amplitude`Wave Fallback`1.6dp × typography/density scale`	Amplitude for the wavy active arc.
`--md-circular-progress-indicator-wave-wavelength`Wave Fallback`15dp × typography/density scale`	Wavelength for the wavy active arc.