Overview
Circular loaders illustrate progress by moving an indicator along a circular track.
Specifications
- Dimensions do not exceed 48x48px
- Progress indicator uses palette.grey.v_800
- Track width is 4px
Placement
- When loading new content, center the loader
- The loader can routinely appear and disappear when indicating a background task
- Do not break the flow of information or content by placing between items (e.g. list items, content cards, table rows)
Related
KCircularLoader'sminVisibleTimeisn't sufficient when switching between more components, for example as part ofv-if/v-elseblocks. In such situations, useKShow may come handy.
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
type | One of 'determinate' or 'indeterminate'. Determinate loaders represent a known completion percentage, while 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 | Whether there should be a delay before the loader displays. Useful if the action often takes less than a second or two. | boolean |
false
| — |
minVisibleTime | Do not hide the loader until minVisibleTime in milliseconds. Useful to avoid jarring UX when the actions finishes very fast. In comparison to delay, minVisibleTime emphasizes that an action associated with the loader is indeed taking place. 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
| — |