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

# Încărcător

> Afișați un indicator de încărcare animat compact lângă o etichetă de stare.

## Prezentare generală

`Loader` afișează un punct animat într-o capsulă mică cu contur. Folosiți-l în timp ce o operațiune este în desfășurare și procentajul este necunoscut. Pentru progres numeric, utilizați [ProgressBar](https://docs.twenty.com/ro/ui/primitives/feedback/progress-bar.md).

**Light**

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

**Dark**

[Exemplu de 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)

## Utilizare

```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>
);
```

Plasați textul de stare vizibil lângă indicatorul de încărcare într-un înveliș. Indicatorul de încărcare este un indicator vizual cu dimensiune fixă și nu acceptă elemente copil.

Aplicația gestionează starea de încărcare. Mențineți containerul de stare montat, astfel încât actualizările textului să poată fi anunțate. Încărcătorul nu atribuie implicit nicio etichetă sau niciun rol de regiune live. Folosește `aria-hidden="true"` atunci când textul din jur sau un buton oferă deja feedback privind încărcarea.

## Compunere și etichetare native

Proprietățile native, `className`, `style` și `ref` vizează div-ul container. `render` acceptă un element sau un callback prin compunerea Base UI. Stilurile suprascriu culorile implicite. `LoaderProps` este exportat din familia de feedback.

Pentru un indicator independent, oferă un rol de stare explicit și un nume accesibil. Punctul animat rămâne decorativ.

```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 />} />
);
```

Folosește în schimb `aria-labelledby` atunci când textul vizibil denumește starea. Păstrează montat un proprietar al unei regiuni live atunci când trebuie să anunțe text în schimbare. Aplicația decide când apare feedbackul și ce spune acesta.

## Culoare

Transmiteți o culoare din paleta temei pentru a seta atât conturul, cât și punctul. Fără o culoare, încărcătorul moștenește culoarea unui buton din jur, dacă este disponibilă; în caz contrar, folosește culoarea terțiară a textului. Pentru o acțiune de buton, preferați [starea de încărcare a Button](https://docs.twenty.com/ro/ui/primitives/input/button.md#state-ownership), care păstrează feedbackul în interiorul controlului.

## Proprietăți

**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.