Need help with Vue or Nuxt? We build fast apps, custom UI libraries, and help you move to Vue 3 and Nuxt 3 — start with a free 2-week trial.
Talk to an Engineer

Progress Circle
#

The va-progress-circle component is used to display an indicator of an app loading content. Also check the va-progress-bar component.

Examples
#

Default
#

By default, the va-progress-circle displays a circular progress bar. Use the value prop to control the progress.

Open in GitHub

Indeterminate
#

Use the indeterminate prop so that the va-progress-circle continuously animates.

Open in GitHub

Coloring
#

Use predefined colors or use your own with the color prop.

Open in GitHub

Sizing
#

Use predefined sizes or use your own with the size prop.

small
large
25px
2rem
Open in GitHub

Slots
#

There is also the default slot if you want to display some additional info about the progress.

65%
...
Open in GitHub

Thickness
#

Use the thickness prop to adjust the stroke size.

0.1
0.6
0.6 + intermediate
Open in GitHub

Accessibility
#

The role of the component is progressbar, the aria-label of the component is progress state, if the value of the component is not indeterminate, aria-valuenow is set to the modelValue prop.

API
#

Props #

NameDescriptionTypesDefault
ariaLabel

The aria-label of the component

String

"$t:progressState"

color

Color of the component (theme string or HEX string).

String

"primary"

fontSizesConfig

Provide a set of sizes for fonts as a global component specific setting.

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}
indeterminate

Using the indeterminate prop, the va-progress-circle continues to animate indefinitely.

Boolean

false

modelValue

The value of the v-model bindings.

Number | String

0

preset

Named preset combination of component props.

String | Array

-

size

Specify size for component. "small", "medium", "large" sizes are available. If you want more control, you can provide number (will be used as px) or string value (rem and px sizes are supported).

String | Number

""

sizesConfig

Provide a set of sizes as a global component specific setting.

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}
thickness

Circle border size between 0 and 1

Number | String

0.06

Slots #

NameDescription

default

Display any additional info about the progress

Css Variables #

NameDefault Value
--va-progress-circle-position relative
--va-progress-circle-overflow hidden
--va-progress-circle-width 80%
--va-progress-circle-height 80%
--va-progress-circle-overlay-transition all ease 2s
--va-progress-circle-font-size 0.75rem