Spinner

An animated loading indicator for async operations.

size

default

size-4

size-6

size-8

size-12

#Installation

bunx --bun barefoot add spinner

#Usage

1import { Spinner } from "@/components/ui/spinner"23function SpinnerDemo() {4  return <Spinner />5}

#Examples

#Sizes

1import { Spinner } from '@/components/ui/spinner'23function SpinnerSizes() {4  return (5    <div className="flex items-center gap-4">6      <Spinner className="size-4" />7      <Spinner className="size-6" />8      <Spinner className="size-8" />9      <Spinner className="size-12" />10    </div>11  )12}

#Button Loading

1"use client"23import { createSignal } from '@barefootjs/dom'4import { Spinner } from '@/components/ui/spinner'5import { Button } from '@/components/ui/button'67function SpinnerButton() {8  const [loading, setLoading] = createSignal(false)910  const handleClick = (e: Event) => {11    e.preventDefault()12    if (loading()) return13    setLoading(true)14    setTimeout(() => setLoading(false), 2000)15  }1617  return (18    <Button disabled={loading()} onClick={handleClick}>19      <Spinner className={`size-4 ${loading() ? '' : 'hidden'}`} />20      <span>{loading() ? 'Processing...' : 'Submit'}</span>21    </Button>22  )23}

#API Reference

Prop	Type	Default	Description
className	string	''	Additional CSS classes. Use size utilities like "size-4" or "size-6" to change the spinner size.
aria-label	string	'Loading'	Accessible label for the spinner.