Components
Spinner
Animated loading indicator in three sizes with accessibility support
Overview
The Spinner component provides an animated loading indicator to show users that content is being loaded or an action is being processed. It includes proper ARIA attributes for screen readers and supports three size variants.
Import
import { Spinner } from "@px-ui/core";Usage
Small
Medium
Large
<Spinner size="small" />
<Spinner size="medium" />
<Spinner size="large" />Examples
With Text
Combine the Spinner with text labels to provide context about what's loading.
Loading...
Processing your request...
Please wait
<div className="flex items-center gap-2">
<Spinner size="small" />
<span>Loading...</span>
</div>
<div className="flex items-center gap-2">
<Spinner size="medium" />
<span>Processing your request...</span>
</div>
<div className="flex items-center gap-3">
<Spinner size="large" />
<span>Please wait</span>
</div>Loading States
Use the Spinner in common loading state scenarios like content areas and button loading states.
Loading content...
<div className="flex items-center justify-center p-8">
<div className="flex flex-col items-center gap-3">
<Spinner size="medium" />
<span>Loading content...</span>
</div>
</div>
<Button disabled>
<Spinner size="small" />
Loading...
</Button>API Reference
Spinner
An animated loading indicator with size customization and accessibility support.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "small" | "medium" | "large" | "small" | Size of the spinner (small: 16px, medium: 24px, large: 32px) |
className | string | - | Additional CSS classes |
Accessibility: The Spinner includes role="status" and aria-label="Loading" for screen reader support.