Components

Spinner

An animated loading indicator. Use it to signal background activity or a pending state.

example.tsx

Import

tsx

import { AppSpinner } from "@/components/primitives/AppSpinner"

Sizes

Control size with Tailwind h-* and w-* classes via className. The default is h-5 w-5.

Colors

The spinner inherits currentColor from its parent. Use a Tailwind text color utility to override it.

Inside a button

Place a spinner before the label and set the button to disabled while the action is in progress.

Overlay

Position the spinner absolutely over a relative container to block the content area during loading.

Content area

API Reference

AppSpinner extends all native <svg> HTML attributes.

Prop	Type	Default	Description
label	string	"Loading..."	Accessible label set on aria-label. Screen readers announce this text.
className	string	—	Additional Tailwind classes merged via cn(). Use h-* w-* for size and text-* for color.

Source

src/components/primitives/AppSpinner.tsx

import * as React from "react"
import { cn } from "../../lib/utils"

type AppSpinnerProps = React.SVGAttributes<SVGSVGElement> & {
  label?: string
}

const AppSpinner = React.forwardRef<SVGSVGElement, AppSpinnerProps>(
  ({ className, label = "Loading...", ...props }, ref) => (
    <svg
      ref={ref}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      aria-label={label}
      role="status"
      className={cn("h-5 w-5 animate-spin text-current", className)}
      {...props}
    >
      <circle
        className="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
      />
    </svg>
  )
)
AppSpinner.displayName = "AppSpinner"

export { AppSpinner }
export type { AppSpinnerProps }