---
id: portfolio.ds.loading-spinner
name: "Loading Spinner"
type: component
status: active
relations: [{"type":"related_to","target":"portfolio.ds.heading"},{"type":"related_to","target":"portfolio.ds.stub-object"}]
sources: ["apps/portfolio-site/src/design-system/docs/loading-spinner.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/LoadingSpinner.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/loading-spinner.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/loading-spinner.astro"]
---
# Loading Spinner

## Purpose
Indeterminate loading status component.

`Loading Spinner` shows that an operation is still in progress when its completion time cannot be predicted.

## Hook

Use next to the title or content context whose next state is loading.

## Contract
- Uses the Lucide `Loader Circle` icon.
- Owns its rotation, size, text color, and reduced-motion behavior.
- Uses `--space-8` for its stable square dimensions.
- Uses `--color-text` so it follows the current text context.
- Exposes a `label` prop as screen-reader-only live status text.
- Stops rotating when reduced motion is requested.

## Use
- A route or content region is loading and the duration is unknown.
- A parent composition can provide a clear nearby title or label for what is loading.

## Do Not Use
- Progress is measurable and a determinate progress indicator would be more informative.
- Nothing is loading and the motion would be decorative.
- A placeholder is needed; use the appropriate placeholder or skeleton pattern instead.

## Accessibility
- Renders `role="status"` with `aria-live="polite"`.
- The visible icon is hidden from assistive technology.
- The accessible label should describe the operation, not only say "spinner".

## Related Components And Patterns

- `Heading`: may provide the visible title for a loading region.
- `Design System Shell`: composes Loading Spinner with the destination page title while route content loads.
- `Stub Object`: is a debug placeholder and must not replace Loading Spinner.

## Code Paths

- `packages/design-system/src/components/LoadingSpinner.astro`
- `apps/portfolio-site/src/design-system/docs/loading-spinner.astro`
- `apps/portfolio-site/src/lib/designSystemRegistry.ts`

## Verification

- Confirm every source path in frontmatter resolves to current implementation or documentation.
- Run `scripts/design-system-graph --check --no-write`.
- Verify actual usage and documented Preview against the enabled package profiles before completion.