> ## 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

> Visualizza un indicatore di caricamento animato compatto accanto a un'etichetta di stato.

## Panoramica

`Loader` mostra un punto animato all'interno di una piccola capsula con bordo. Utilizzalo mentre è in corso un'operazione e la percentuale è sconosciuta. Per il progresso numerico, usa [ProgressBar](https://docs.twenty.com/it/ui/primitives/feedback/progress-bar.md).

**Light**

[Esempio di Loader (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-loader--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di Loader (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-loader--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-loader--display)

## Utilizzo

```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) => (
  <Text
    render={<div />}
    role="status"
    style={{ display: 'flex', alignItems: 'center', gap: 8 }}
  >
    {isSaving && <Loader color="blue" aria-hidden="true" render={<span />} />}
    {isSaving ? 'Saving changes' : 'Changes saved'}
  </Text>
);
```

Inserisci il testo di stato visibile accanto al loader in un wrapper. Il loader è un indicatore visivo a dimensione fissa e non accetta elementi figli.

L'applicazione gestisce lo stato di caricamento. Mantieni montato il contenitore dello stato affinché gli aggiornamenti del testo possano essere annunciati. Per impostazione predefinita, il loader non assegna alcuna etichetta né alcun ruolo di area live. Usa `aria-hidden="true"` quando il testo circostante o un pulsante fornisce già un feedback di caricamento.

## Composizione ed etichettatura native

Le proprietà native, `className`, `style` e `ref` sono destinate al div contenitore. `render` accetta un elemento o un callback tramite la composizione di Base UI. Gli stili sovrascrivono i colori predefiniti. `LoaderProps` viene esportato dalla famiglia di feedback.

Per un indicatore autonomo, fornisci un ruolo di stato esplicito e un nome accessibile. Il punto animato rimane decorativo.

```tsx theme={null}
import { Loader, type LoaderProps } from 'twenty-ui/primitives/feedback';

const loadingProps: LoaderProps = {
  role: 'status',
  'aria-label': 'Loading results',
  color: 'blue',
};

export const LoadingResults = () => (
  <Loader {...loadingProps} render={<span />} />
);
```

Usa invece `aria-labelledby` quando il testo visibile denomina lo stato. Mantieni montato un proprietario dell'area live quando deve annunciare testo variabile. L'applicazione determina quando viene visualizzato il feedback e cosa comunica.

## Colore

Passa un colore della palette del tema per impostare sia il bordo sia il punto. Senza un colore, il loader eredita il colore di un pulsante circostante quando disponibile; altrimenti utilizza il colore del testo terziario. Per un'azione di pulsante, preferisci lo [stato di caricamento di Button](https://docs.twenty.com/it/ui/primitives/input/button.md#state-ownership), che mantiene il feedback all'interno del controllo.

## Props

**aria-hidden** `Booleanish`

Hide a decorative loader when another element supplies loading feedback.

**aria-label** `string`

Accessible name for a labeled loader status.

**aria-labelledby** `string`

ID of text that names the loader status.

**className** `string`

CSS class merged with the loader container class.

**color** `"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "tomato" | "turquoise" | "violet" | "yellow"`

Theme color for the animated dot and border. When omitted, inherits the button color if available, otherwise the tertiary text color.

**ref** `Ref\<HTMLDivElement\>`

Ref to the container div, or the element supplied through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Element or render callback composed through Base UI useRender.

**role** `AriaRole`

Supply status to expose loading feedback as a live region. No role is assigned by default.

**style** `CSSProperties`

Native styles merged with the loader color defaults. Explicit styles win.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.