> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Loader

> A layout-aware loading indicator that renders a centered `SpinnerIcon` inside a relatively-positioned container.

```tsx theme={null}
import { Loader } from "@fanvue/ui";
import type { LoaderProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-loader--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="180" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Loader — Default" />
</Frame>

```tsx theme={null}
import { Loader } from "@fanvue/ui";

<Loader minHeight={200} />
```

## Custom Min Height

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-loader--custom-min-height&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="180" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Loader — Custom Min Height" />
</Frame>

```tsx theme={null}
import { Loader } from "@fanvue/ui";

<Loader center minHeight={400} />
```

## Centered

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-loader--centered&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="180" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Loader — Centered" />
</Frame>

```tsx theme={null}
import { Loader } from "@fanvue/ui";

<Loader center minHeight={200} />
```

## Centered Horizontally

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-loader--centered-horizontally&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="180" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Loader — Centered Horizontally" />
</Frame>

```tsx theme={null}
import { Loader } from "@fanvue/ui";

<Loader centerX minHeight={200} />
```

## Centered Vertically

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-loader--centered-vertically&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="180" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Loader — Centered Vertically" />
</Frame>

```tsx theme={null}
import { Loader } from "@fanvue/ui";

<Loader centerY minHeight={200} />
```

## Props

## Loader

A layout-aware loading indicator that renders a centered `SpinnerIcon` inside a relatively-positioned container. Drop-in replacement for the Olympus `Loader`.

<ParamField path="ariaLabel" type="string" default="loading">
  Accessible label for the loading indicator.
</ParamField>

<ParamField path="center" type="boolean" default="false">
  Center the spinner horizontally.
</ParamField>

<ParamField path="centerX" type="boolean" default="false">
  Center the spinner horizontally.
</ParamField>

<ParamField path="centerY" type="boolean" default="false">
  Center the spinner vertically.
</ParamField>

<ParamField path="minHeight" type="string | number" default="100%">
  Minimum height of the container. Numbers are treated as pixels.
</ParamField>

<ParamField path="show" type="boolean" default="true">
  Whether the loader is visible. When `false`, renders nothing.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `LoaderProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)