Spinner

A loading indicator component for showing progress or activity.

Import

<script setup lang="ts">
import { Spinner } from '@heroui-vue/vue'
</script>

Usage

Basic

<template>
  <div class="flex gap-4 items-center">
    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
  </div>
</template>

<script setup>
import { Spinner } from '@heroui-vue/vue'
</script>

Sizes

<template>
  <div class="flex gap-4 items-center">
    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
    <Spinner size="xl" />
  </div>
</template>

<script setup>
import { Spinner } from '@heroui-vue/vue'
</script>

Colors

<template>
  <div class="flex gap-4 items-center">
    <Spinner color="accent" />
    <Spinner color="success" />
    <Spinner color="warning" />
    <Spinner color="danger" />
  </div>
</template>

<script setup>
import { Spinner } from '@heroui-vue/vue'
</script>

With Label

<template>
  <Spinner label="Loading..." />
</template>

Label Placement

<template>
  <Spinner label="Loading..." label-placement="bottom" />
  <Spinner label="Loading..." label-placement="right" />
</template>

In Button

<template>
  <Button :disabled="loading">
    <Spinner v-if="loading" size="sm" />
    {{ loading ? 'Loading...' : 'Submit' }}
  </Button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
</script>

API

Spinner Props

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg' | 'xl'	'md'	The spinner size
color	'current' | 'accent' | 'success' | 'warning' | 'danger'	'accent'	The spinner color
label	string	-	The loading label text
labelPlacement	'bottom' | 'right'	'bottom'	The label placement

Spinner Slots

Slot	Description
label	Custom label content

Accessibility

• Spinner uses role="status" for proper semantics
• Includes aria-label for screen readers
• Label is properly associated with the spinner
• Announces loading state to assistive technologies