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-svelte@latest add https://uipkge.dev/r/svelte/spinner.json
Manifest:https://uipkge.dev/r/svelte/spinner.jsonInstalls to:src/lib/components/ui/spinner/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
size
'default''sm''lg''icon'
defaultoptional

Used by

Files installed (3)

  • src/lib/components/ui/spinner/Spinner.svelte0.8 kB
    <script lang="ts" module>
  import type { LucideProps } from '@lucide/svelte'
  import type { SpinnerVariants } from './spinner.variants'

  // LucideProps (extends SVGAttributes) so rest-spread into the icon
  // typechecks; `size` is the cva tier, not lucide's pixel size.
  export interface SpinnerProps extends Omit<LucideProps, 'size'> {
    size?: SpinnerVariants['size']
  }
</script>

<script lang="ts">
  import { Loader2 } from '@lucide/svelte'
  import { cn } from '$lib/utils'
  import { spinnerVariants } from './spinner.variants'

  let { class: className, size = 'default', ...restProps }: SpinnerProps = $props()
</script>

<Loader2
  data-uipkge=""
  data-slot="spinner"
  class={cn(spinnerVariants({ size }), className as string | undefined)}
  aria-label="Loading"
  role="status"
  {...restProps}
/>
  • src/lib/components/ui/spinner/spinner.variants.ts0.8 kB
  • src/lib/components/ui/spinner/index.ts0.1 kB

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