Spinner
A loading spinner component that indicates an in-progress operation.
Overview
The Spinner component provides a visual indicator for loading states and asynchronous operations.
Usage
import { Spinner } from "@tilt-legal/cubitt-components/primitives";<Spinner />Examples
Sizes
The Spinner comes in five size variants: xs, sm, md (default), lg, and xl.
import { Spinner } from "@tilt-legal/cubitt-components/primitives";
<div className="flex items-center gap-6">
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</div>;Inline
Display a spinner inline with text.
import { Spinner } from "@tilt-legal/cubitt-components/primitives";
<p className="text-sm text-muted-foreground">
Please wait while we process your request{" "}
<Spinner size="xs" className="inline-block align-middle" />
</p>;API Reference
Spinner
Extends all props from LoaderAnimatedIcon.
| Prop | Type | Description |
|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | Size of the spinner. Defaults to "md". |
className | string | Additional CSS classes for styling. |