Wensity

Spinner

Loading indicators for inline actions and blocking app 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" />;
}