Spinner

Usage

import { Spinner } from '@hareui/vue'

<script setup lang="ts">import { Spinner } from '@hareui/vue'</script><template>  <div class="flex items-center gap-4">    <Spinner />  </div></template>

Anatomy

Spinner is a single component with one slot.

ui keys: base.

Examples

Colors

Current

Accent

Success

Warning

Danger

<script setup lang="ts">import { Spinner } from '@hareui/vue'</script><template>  <div class="flex items-center gap-8">    <div class="flex flex-col items-center gap-2">      <Spinner color="current" />      <span class="text-xs text-muted">Current</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner color="accent" />      <span class="text-xs text-muted">Accent</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner color="success" />      <span class="text-xs text-muted">Success</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner color="warning" />      <span class="text-xs text-muted">Warning</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner color="danger" />      <span class="text-xs text-muted">Danger</span>    </div>  </div></template>

Sizes

Small

Medium

Large

Extra Large

<script setup lang="ts">import { Spinner } from '@hareui/vue'</script><template>  <div class="flex items-center gap-8">    <div class="flex flex-col items-center gap-2">      <Spinner size="sm" />      <span class="text-xs text-muted">Small</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner size="md" />      <span class="text-xs text-muted">Medium</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner size="lg" />      <span class="text-xs text-muted">Large</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner size="xl" />      <span class="text-xs text-muted">Extra Large</span>    </div>  </div></template>

Speed

Apply an animation utility via the class prop to change how fast a single spinner rotates. Pair it with motion-reduce:animate-none so it stays still for users who prefer reduced motion.

Slow

Default

Fast

<script setup lang="ts">import { Spinner } from '@hareui/vue'</script><template>  <div class="flex items-center gap-8">    <div class="flex flex-col items-center gap-2">      <Spinner class="animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none" />      <span class="text-xs text-muted">Slow</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner />      <span class="text-xs text-muted">Default</span>    </div>    <div class="flex flex-col items-center gap-2">      <Spinner class="animate-[spin_0.4s_linear_infinite] motion-reduce:animate-none" />      <span class="text-xs text-muted">Fast</span>    </div>  </div></template>

Customization

Tailwind CSS

<script setup lang="ts">import { Spinner } from '@hareui/vue'</script><template>  <div class="flex items-center gap-4 rounded-xl border border-border bg-surface px-5 py-4">    <Spinner class="text-accent" size="sm" />    <Spinner class="text-muted" size="md" />    <Spinner class="text-success" size="lg" />  </div></template>

Global theme override

app.use(createHareUI({
  ui: {
    spinner: {
      defaultVariants: { color: 'current' },
    },
  },
}))

Styling Reference

`ui` key	`data-slot`	Description
`base`	`spinner`	The root `<span role="status">`

API Reference

Props

Prop	Type	Default	Description
`size`	`"md" \| "sm" \| "lg" \| "xl"`	`'md'`	Size of the spinner.
`color`	`"accent" \| "success" \| "warning" \| "danger" \| "current"`	`'accent'`	Color of the spinner.
`ui`	`ComponentSlots<{ slots: { base: string; }; variants: { color: { accent: { base: string; }; current: { base: string; }; danger: { base: string; }; success: { base: string; }; warning: { base: string; }; }; size: { sm: { base: string; }; md: { base: string; }; lg: { base: string; }; xl: { base: string; }; }; }; defaultVariants: { color: string; size: string; }; }>`	-	Per-slot class overrides.

Button

On this page