UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Spinner

spinnerui
Boilerplate repo

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.

Installation

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/spinner.json
Named registry:npx shadcn-vue@latest add @uipkge/spinnerInstalls to:app/components/ui/spinner/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
classHTMLAttributes['class']—optional
size
'default''sm''lg''icon'
—optional

Used by

Files installed (3)

  • app/components/ui/spinner/Spinner.vue0.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.ts0.8 kB
  • app/components/ui/spinner/index.ts0.3 kB

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