Wensity

Spinner

Indeterminate loading indicators in default, ring, dots, pulse, and overlay styles for inline and blocking states.

spinnerloadingindicatorringdotspulseoverlayfeedback
Loading preview

Examples

Practical examples and common states for the same installable component.

Default

Fast single-arc loading for compact inline states.

examples/spinner-default.tsx
import { Spinner } from "@/components/wensity/spinner";


export function DefaultSpinner() {
  return <Spinner variant="default" label="Loading components" showLabel />;
}

Ring

Layered ring with stronger loading presence.

examples/spinner-ring.tsx
import { Spinner } from "@/components/wensity/spinner";


export function RingSpinner() {
  return <Spinner variant="ring" tone="success" label="Publishing changes" showLabel />;
}

Dots

Conversational loading for AI and search flows.

examples/spinner-dots.tsx
import { Spinner } from "@/components/wensity/spinner";


export function DotsSpinner() {
  return <Spinner variant="dots" tone="warning" label="Preparing response" showLabel />;
}

Pulse

Ambient waiting state without continuous rotation.

examples/spinner-pulse.tsx
import { Spinner } from "@/components/wensity/spinner";


export function PulseSpinner() {
  return <Spinner variant="pulse" tone="danger" label="Waiting for webhook" showLabel />;
}

Overlay

Blocking loader for a panel or workspace region.

examples/spinner-overlay.tsx
import { SpinnerOverlay } from "@/components/wensity/spinner";


export function LoadingOverlay() {
  return <SpinnerOverlay label="Refreshing billing" />;
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add spinner

Usage

Import Spinner from @/components/wensity/spinner and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { Spinner } from "@/components/wensity/spinner";


export function SpinnerDemo() {
  return <Spinner label="Loading components" showLabel />;
}

Props

PropTypeDefaultDescription
variant"default" | "ring" | "dots" | "pulse""default"Which loading animation to render.
size"sm" | "md" | "lg""md"Spinner diameter.
tone"neutral" | "brand" | "success" | "warning" | "danger""neutral"Spinner colour.
labelstring"Loading"Accessible label announced while the spinner is visible.
showLabelbooleanfalseRenders the label as visible text beside the spinner.