Spinner

Component source on Github This page on Github

Reference

base"spinner"
String
Base name used to style component
iconundefined
StringObject
Icon to use instead of border or SVG spinner
mod-containerempty string
String
Style of the container element
mod-spinnerempty string
String
Style of the main spinner element
nameempty string
String
Name of the component
type"border"
String
Valid values are 'border' for border spinner or 'svg' for SVG spinner.
variantempty string
String
Active variant of the element mod-* props

Example

Border spinners

SVG spinners

Icon spinners

    <template>
  <p class="my-4">Border spinners</p>
  <div class="flex items-end gap-x-10">
    <v-spinner mod-spinner="variant:primary size:small" />
    <v-spinner mod-spinner="variant:success" />
    <v-spinner mod-spinner="variant:warn size:large" />
  </div>

  <p class="my-4">SVG spinners</p>
  <div class="flex items-end gap-x-10">
    <v-spinner type="svg" mod-spinner="variant:primary size:small" />
    <v-spinner type="svg" mod-spinner="variant:success" />
    <v-spinner type="svg" mod-spinner="variant:warn size:large" />
  </div>

  <p class="my-4">Icon spinners</p>
  <div class="flex items-end gap-x-10">
    <v-spinner icon="mdi-loading" mod-spinner="variant:primary" />
    <v-spinner icon="b-arrow-clockwise" mod-spinner="variant:success" />
  </div>
</template>