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
| — |