VProgressLinear API

Props

name	type	default
`absolute`	boolean	false
Applies position: absolute to the component.
`active`	boolean	true
Reduce the height to 0, hiding component.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`bg-opacity`	string \| number	undefined
Background opacity, if null it defaults to 0.3 if background color is not specified or 1 otherwise.
`buffer-color`	string	undefined
Sets the color of the buffer bar.
`buffer-opacity`	string \| number	undefined
Set the opacity of the buffer bar.
`buffer-value`	string \| number	0
The percentage value for the buffer.
`chunk-count` New in v3.10.0	string \| number	null
Specifies amount of chunks to divide the bar into.
`chunk-gap` New in v3.10.0	string \| number	4
Defines size of the gap between chunks.
`chunk-width` New in v3.10.0	string \| number	null
Defines chunk absolute size. Useful when chunk is narrow.
`clickable`	boolean	false
Clicking on the progress track will automatically set the value.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`height`	string \| number	4
Sets the height for the component.
`indeterminate`	boolean	false
Constantly animates, use when loading progress is unknown.
`location`	Anchor	'top'
Specifies the component’s location. Can combine by using a space separated string.
`max`	string \| number	100
Sets the maximum value the progress can reach.
`model-value`	string \| number	0
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`opacity`	string \| number	undefined
Set the opacity of the progress bar.
`reverse`	boolean	false
Displays reversed progress (right to left in LTR mode and left to right in RTL).
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`rounded-bar`	boolean	false
Applies a border radius to the progress bar.
`stream`	boolean	false
An alternative style for portraying loading that works in tandem with buffer-value.
`striped`	boolean	false
Adds a stripe background to the filled portion of the progress component.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.

Events

name	type
`update:modelValue`	[number]
Event that is emitted when the component’s model changes.

Slots

{ value: number; buffer: number }

`default`
Provides the current value of the component.

SASS Variables

name	default
`$progress-linear-background`	currentColor
`$progress-linear-background-background`	$progress-linear-background
`$progress-linear-background-opacity`	var(--v-border-opacity)
`$progress-linear-border-radius`	map.get(settings.$rounded, 'pill')
`$progress-linear-indeterminate-animation-duration`	2.2s
`$progress-linear-stream-animation`	stream .25s infinite linear
`$progress-linear-stream-border-width`	4px
`$progress-linear-stream-opacity`	0.3
`$progress-linear-stripe-background-size`	40px 40px
`$progress-linear-stripe-gradient`	linear-gradient( 135deg, hsla(0, 0%, 100%, .25) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .25) 0, hsla(0, 0%, 100%, .25) 75%, transparent 0, transparent )
`$progress-linear-striped-animation`	progress-linear-stripes 1s infinite linear
`$progress-linear-striped-size`	var(--v-progress-linear-height)
`$progress-linear-transition`	.2s settings.$standard-easing

#VProgressLinear API

VProgressLinear API