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

# Loader

> Display a compact animated loading indicator beside a status label.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Loader` shows an animated dot inside a small bordered capsule. Use it while an operation is in progress and the percentage is unknown. For numeric progress, use [ProgressBar](/ui/primitives/feedback/progress-bar).

<StoryEmbed storyId="ui-feedback-loader--with-color" title="Loader example" />

## Usage

```tsx theme={null}
import { Loader } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

type SaveFeedbackProps = { isSaving: boolean };

export const SaveFeedback = ({ isSaving }: SaveFeedbackProps) => (
  <div role="status">
    {isSaving && (
      <div aria-hidden="true">
        <Loader color="blue" />
      </div>
    )}
    <Text>{isSaving ? 'Saving changes' : 'Changes saved'}</Text>
  </div>
);
```

The application owns loading state. Keep the status wrapper mounted so text updates can be announced. The loader itself supplies no label or live region and accepts only `color`.

## Color

Pass a theme palette color to set both the border and dot. Without a color, the loader inherits a surrounding button color when available, otherwise it uses the tertiary text color. For a button action, prefer [Button's loading state](/ui/primitives/input/button#state-ownership), which keeps the feedback inside the control.

## Props

<ParamField body="color" type="&#x22;amber&#x22; | &#x22;blue&#x22; | &#x22;bronze&#x22; | &#x22;brown&#x22; | &#x22;crimson&#x22; | &#x22;cyan&#x22; | &#x22;gold&#x22; | &#x22;grass&#x22; | &#x22;gray&#x22; | &#x22;green&#x22; | &#x22;iris&#x22; | &#x22;jade&#x22; | &#x22;lime&#x22; | &#x22;mint&#x22; | &#x22;orange&#x22; | &#x22;pink&#x22; | &#x22;plum&#x22; | &#x22;purple&#x22; | &#x22;red&#x22; | &#x22;ruby&#x22; | &#x22;sky&#x22; | &#x22;tomato&#x22; | &#x22;turquoise&#x22; | &#x22;violet&#x22; | &#x22;yellow&#x22;">
  Theme color for the animated dot and border. When omitted, inherits the button color if available, otherwise the tertiary text color.
</ParamField>