Delphi Design

A spinner component for loading states.

Default

With Text

Usage

import { LoadingSpinner } from "@delphi/ui";

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <LoadingSpinner />
      <span>Loading...</span>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for sizing/color

Use spinners for async operations under 10 seconds

Add descriptive text alongside the spinner when possible

Use aria-busy="true" on the container during loading

Size the spinner appropriately for its context (button vs page)

Consider skeleton loaders for content-heavy areas

Use spinners without any indication of what's loading

Show spinners for operations under 300ms — it's jarring

Use multiple spinners on the same view

Replace important content with only a spinner