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

See the loaders page for more information.


  • Dimensions do not exceed 48x48px
  • Progress indicator uses palette.grey.v_800
  • Track width is 4px


  • 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)


  • KCircularLoader's minVisibleTime isn't sufficient when switching between more components, for example as part of v-if/v-else blocks. In such situations, useKShow may come handy.


Name Description Type Default Required
One of 'determinate' or 'indeterminate'. Determinate loaders represent a known completion percentage, while indeterminate loaders simply show that activity is currently happening.
string 'indeterminate'
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
For determinate loaders, value between 0 and 100 representing percentage completion
number 0
Whether there should be a delay before the loader displays. Useful if the action often takes less than a second or two.
boolean false
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
Overall size of the loader in pixels
number 32
Stroke width of the loader in pixels
number 4
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