> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Loader

A spinner for a short, in-context wait you cannot measure — one thing at a time, placed where the waiting is happening. Reach for `Skeleton` when a page, list or table is loading a layout you already know, and for `Progress` when you can measure the wait or it runs past about ten seconds, where a spinner starts to read as frozen; a `Button` carries its own loading state, so never put one beside a button. It ships no label and no live region of its own, so the announcement has to come from a `role="status"` element around it.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Loader) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/loading-loader--overview)

```tsx
import { Loader } from '@wallarm-org/design-system/Loader';

export const Basic = () => <Loader />;
```

## Usage

```tsx
import { Loader } from '@wallarm-org/design-system/Loader';
```

## Examples

### Types

`circle` beside `sonner`, the radial fade. Pick one for a surface and stay with it rather than mixing both in a view.

```tsx
import { Loader } from '@wallarm-org/design-system/Loader';
import { HStack } from '@wallarm-org/design-system/Stack';

export const Types = () => (
  <HStack>
    <Loader type='circle' />
    <Loader type='sonner' />
  </HStack>
);
```

### Sizes

`sm` to `3xl`, 12px to 48px. The small end is for inline waits inside a field or a row; `xl` and up are for a spinner centred in a panel.

```tsx
import { Loader } from '@wallarm-org/design-system/Loader';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => (
  <VStack>
    <HStack>
      <Loader size='sm' />
      <Loader size='md' />
      <Loader size='lg' />
      <Loader size='xl' />
      <Loader size='2xl' />
      <Loader size='3xl' />
    </HStack>

    <HStack>
      <Loader type='sonner' size='sm' />
      <Loader type='sonner' size='md' />
      <Loader type='sonner' size='lg' />
      <Loader type='sonner' size='xl' />
      <Loader type='sonner' size='2xl' />
      <Loader type='sonner' size='3xl' />
    </HStack>
  </VStack>
);
```

### Colors

The icon colours, with `primary-alt` and `primary-alt-fixed` for dark surfaces. With no `color` set the spinner simply takes the current text colour, which is usually what you want.

```tsx
import { Loader } from '@wallarm-org/design-system/Loader';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Colors = () => (
  <VStack>
    <HStack>
      <Loader color='primary' />
      <Loader color='brand' />
      <Loader color='danger' />
      <div className='flex gap-4 bg-slate-950'>
        <Loader color='primary-alt' />

        <Loader color='primary-alt-fixed' />
      </div>
    </HStack>

    <HStack>
      <Loader type='sonner' color='primary' />
      <Loader type='sonner' color='brand' />
      <Loader type='sonner' color='danger' />
      <div className='flex gap-4 bg-slate-950'>
        <Loader type='sonner' color='primary-alt' />

        <Loader type='sonner' color='primary-alt-fixed' />
      </div>
    </HStack>
  </VStack>
);
```

### Circle background

`background={false}` drops the faint track ring behind the circle — worth it on a surface where the ring reads as a border. It applies to `circle` only.

```tsx
import { Loader } from '@wallarm-org/design-system/Loader';
import { HStack } from '@wallarm-org/design-system/Stack';

export const CircleBackground = () => (
  <HStack>
    <Loader />
    <Loader background={false} />
  </HStack>
);
```

## Props

| Prop        | Type                                                                                                      | Default  | Description |
| ----------- | --------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| type        | `LoaderType \| undefined`                                                                                 | `circle` |             |
| background  | `boolean \| undefined`                                                                                    | `true`   |             |
| color       | `{ primary: string; 'primary-alt': string; 'primary-alt-fixed': string; brand: string; danger: string; }` |          |             |
| size        | `{ sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; }`                       | `xl`     |             |
| data-testid | `string \| undefined`                                                                                     |          |             |