Overview

Circular loaders illustrate progress by moving an indicator along a circular track.

See the loaders page for more information and guidelines.

Usage

Determinate

Indeterminate

Props

Name Description Type Default Required
type
One of 'determinate' or 'indeterminate'. Determinate loaders represent a known completion percentage. Indeterminate loaders simply show that activity is currently happening.
string 'indeterminate'
shouldShow
Whether the loader should be displayed or not. It needs to be used instead of v-if/v-show for minVisibleTime to work.
boolean true
progress
For determinate loaders, value between 0 and 100 representing percentage completion
number 0
delay
Apply 300ms delay before showing loading state. Recommended in majority of cases.
boolean false
minVisibleTime
Guarantee that loading state will be visible for at least this value in milliseconds once shown. Recommended in majority of cases. Recommended value 400ms. shouldShow prop needs to be used instead of v-if/v-show for this to work.
number 0
size
Overall size of the loader in pixels
number 32
stroke
Stroke width of the loader in pixels
number 4
disableDefaultTransition
Disables the default fade transition. Disabling is suitable when using a loader in tandem with another component (e.g. as part of v-if/v-else) as we typically need to wrap both components in a single transition. Having a loader wrapped by its own transition can cause glitches in such situations.
boolean false