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

# Cargador

> Muestra un indicador de carga animado y compacto junto a una etiqueta de estado.

## Resumen

`Loader` muestra un punto animado dentro de una pequeña cápsula con borde. Úsalo mientras una operación está en curso y se desconoce el porcentaje. Para el progreso numérico, usa [ProgressBar](https://docs.twenty.com/es/ui/primitives/feedback/progress-bar.md).

**Light**

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

**Dark**

[Ejemplo de cargador (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)

## "Uso"

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

Coloca texto de estado visible junto al cargador en un contenedor. El cargador es un indicador visual de tamaño fijo y no acepta elementos secundarios.

La aplicación controla el estado de carga. Mantén montado el contenedor de estado para que se puedan anunciar las actualizaciones de texto. El cargador no asigna ninguna etiqueta ni función de región dinámica de forma predeterminada. Usa `aria-hidden="true"` cuando el texto circundante o un botón ya proporciona comentarios sobre la carga.

## Composición y etiquetado nativos

Las props nativas, `className`, `style` y `ref` se aplican al div contenedor. `render` acepta un elemento o una devolución de llamada mediante la composición de Base UI. Los estilos anulan los colores predeterminados. `LoaderProps` se exporta desde la familia de comentarios.

Para un indicador independiente, proporciona una función de estado explícita y un nombre accesible. El punto animado sigue siendo 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 `aria-labelledby` en su lugar cuando el texto visible nombra el estado. Mantén montado un propietario de región dinámica cuando necesite anunciar texto cambiante. La aplicación controla cuándo aparecen los comentarios y qué dicen.

## Color

Pasa un color de la paleta del tema para establecer tanto el borde como el punto. Sin un color, el cargador hereda el color de un botón circundante cuando está disponible; de lo contrario, usa el color de texto terciario. Para una acción de botón, prefiere el [estado de carga de Button](https://docs.twenty.com/es/ui/primitives/input/button.md#state-ownership), que mantiene la respuesta dentro del control.

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