BlogPlaygroundOne

VProgress API

ads via vuetify

Props
name
type
default
absolute
boolean

false

Positions the component absolutely within its parent, centering the progress indicator and placing details without affecting layout.

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.

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.

details-position
'top' | 'bottom'

'top'

Controls the position of the details (label and value) relative to the progress indicator.

hide-label
boolean

false

Hides the label text.

hide-value
boolean

false

Hides the value text.

indeterminate
boolean

false

Constantly animates, use when loading progress is unknown.

label
string

undefined

Text displayed alongside the progress indicator and placed in aria-label.

max
string | number

100

Sets the maximum value for the progress indicator.

model-value
string | number

0

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

rounded
boolean

false

MISSING DESCRIPTION (edit in github)

theme
string

undefined

Specify a theme for this component and all of its children.

type
'linear' | 'circular'

'linear'

Determines which progress indicator to render.

value-format
  | string
  | ((ctx: { value: number; max: number; percent: number }) => string)

'[percent]%'

Formatter for the visible value text and aria-valuetext. Use [value] and [max] as placeholders in strings, or pass a function that receives { value, max } and returns a string.

Slots
{ max: number percent: number value: number formattedValue: string }
{ max: number percent: number value: number formattedValue: string }
{ max: number percent: number value: number formattedValue: string }
default

Provides the current value of the component.

label

Slot for custom label content.

value

Slot for custom value content.