UIPackage
Vue React

Spinner

Vue feedback
Edit on GitHub

Lightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/spinner.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/spinner

Examples

Props

Name Type / Values Default Required
class HTMLAttributes['class'] — optional
size
'default''sm''lg''icon'
— optional

Dependencies

class-variance-authoritylucide-vue-next

Files (3)

  • app/components/ui/spinner/Spinner.vue 0.6 kB 
    <script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Loader2 } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { spinnerVariants } from './spinner.variants'

// Inlined union: SFC compiler can't extract runtime props from
// `SpinnerVariants['size']`.
const props = defineProps<{
  class?: HTMLAttributes['class']
  size?: 'default' | 'sm' | 'lg' | 'icon'
}>()
</script>

<template>
  <Loader2
    data-uipkge
    data-slot="spinner"
    :class="cn(spinnerVariants({ size: size ?? 'default' }), props.class)"
    aria-label="Loading"
    role="status"
  />
</template>
  • app/components/ui/spinner/spinner.variants.ts 0.7 kB 
    import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const spinnerVariants = cva('animate-spin text-muted-foreground', {
  variants: {
    size: {
      default: 'size-6',
      sm: 'size-4',
      lg: 'size-8',
      icon: 'size-4',
    },
  },
  defaultVariants: {
    size: 'default',
  },
})

export type SpinnerVariants = VariantProps<typeof spinnerVariants>
  • app/components/ui/spinner/index.ts 0.3 kB 
    export { default as Spinner } from './Spinner.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { spinnerVariants, type SpinnerVariants } from './spinner.variants'

Raw manifest: https://uipkge.dev/r/vue/spinner.json