The linear progress component supports colors. Colors can be changed via the css variables --v-progress-linear-color and --v-progress-linear-background-color

<v-progress-linear />
<style>
.v-overlay {
	--v-progress-linear-color: red;
	--v-progress-linear-background-color: var(--black);
}
</style>

Indeterminate

The progress indicator can be rendered in indeterminate mode by passing the indeterminate prop. Use this when it's unclear when the progress will be done.

Props

Prop	Description	Default
`absolute`	Applies `position: absolute`	`false`
`bottom`	Align the progress bar to the bottom	`false`
`fixed`	Applies `position: fixed;` to the element	`false`
`indeterminate`	Animates the bar, use when loading progress is unknown	`false`
`rounded`	Add a border radius to the bar	`false`
`top`	Align progress bar to the top of the parent container	`false`
`value`	Percentage value for current progress	`0`

Events

n/a

Slots

Slots	Description	Value
default		--

CSS Variables

Variable	Default
`--v-progress-linear-height`	`4px`
`--v-progress-linear-color`	`var(--foreground-normal)`
`--v-progress-linear-background-color`	`var(--border-normal)`