VProgressCircular API

Props

name	type	default
`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.
`indeterminate`	boolean \| 'disable-shrink'	false
Constantly animates, use when loading progress is unknown. If set to the string `'disable-shrink'` it will use a simpler animation that does not run on the main thread.
`model-value`	string \| number	0
The percentage value for current progress.
`reveal` New in v3.12.0	boolean \| { duration: number }	false
Animates the progress circle from 0 to its model value when the component mounts.
`rotate`	string \| number	0
Rotates the circle start point in degrees.
`rounded` New in v3.11.0	boolean	false
Rounds the ends of the progress arc for a softer appearance. When enabled, the progress stroke will have rounded caps instead of square ends.
`size`	string \| number	'default'
Sets the diameter of the circle in pixels.
`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.
`width`	string \| number	4
Sets the stroke of the circle in pixels.

Slots

{ value: number }

`default`
The default Vue slot.

SASS Variables

name	default
`$progress-circular-intermediate-svg-transition`	all 0.2s ease-in-out
`$progress-circular-overlay-transform`	rotate(calc(-90deg))
`$progress-circular-overlay-transition`	all 0.2s ease-in-out, stroke-width 0s
`$progress-circular-reveal-duration`	900ms
`$progress-circular-rotate-animation`	progress-circular-rotate 1.4s linear infinite
`$progress-circular-rotate-dash`	progress-circular-dash 1.4s ease-in-out infinite
`$progress-circular-size`	32px
`$progress-circular-sizes`	( 'x-small': -2, 'small': -1, 'default': 0, 'large': 2, 'x-large': 4 )
`$progress-circular-underlay-color`	rgba(var(--v-border-color), var(--v-border-opacity))

#VProgressCircular API

VProgressCircular API