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

# ProgressBar

> Muestra el progreso medido o indeterminado con una barra horizontal.

## Resumen

`ProgressBar` proporciona una apariencia horizontal para [Progreso](https://docs.twenty.com/es/ui/primitives/feedback/progress.md). Preserva el contrato completo del elemento raíz, incluidos los atributos nativos, las referencias, la composición de renderizado, el formato, los rangos personalizados y el progreso indeterminado. Asígnale un `aria-label` que identifique la operación.

**Light**

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

**Dark**

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

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

## "Uso"

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

type ImportProgressProps = { importedRecords: number | null };

export const ImportProgress = ({ importedRecords }: ImportProgressProps) => (
  <Text style={{ display: 'grid', gap: 8, width: 300 }}>
    <Text>Importing records: {importedRecords ?? 'preparing'}</Text>
    <ProgressBar
      value={importedRecords}
      max={1000}
      aria-label="Importing records"
    />
  </Text>
);
```

## Propiedad del estado y rangos

`value` es obligatorio y está controlado por la aplicación. No hay modo `defaultValue`. El componente no inicia una solicitud ni avanza el progreso por sí solo. Pasa `null` cuando se desconozca el progreso. Los valores no finitos también permanecen indeterminados.

`min` toma de forma predeterminada el valor `0` y `max`, el valor `100`. Los valores finitos se limitan al rango para el valor semántico y el relleno normalizado. Un valor de `70` en el rango de `20` a `120` llena la mitad de la barra e indica `50%`, mientras que `aria-valuenow` se mantiene en `70`.

**Light**

[Un mínimo distinto de cero y un máximo personalizado (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--custom-range\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Un mínimo distinto de cero y un máximo personalizado (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--custom-range\&viewMode=story\&globals=colorScheme:dark)

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

Usa `aria-valuetext`, `getAriaValueText`, `locale` y `format` como se describe en [Progreso](https://docs.twenty.com/es/ui/primitives/feedback/progress.md). Usa partes de Progress compuestas cuando las etiquetas y los valores necesiten su propio diseño visible.

Usa [Toast](https://docs.twenty.com/es/ui/components/feedback/toast.md) para notificaciones con una cuenta regresiva de descarte y pausa al pasar el cursor.

## Apariencia y composición

`size` selecciona una pista de 6 px u 8 px. `barColor` y `backgroundColor` aceptan colores CSS, incluidas las variables de tema. `withBorderRadius` redondea la pista y el indicador. `withMinimumFillWidth` mantiene un pequeño relleno estético solo entre el mínimo y la finalización. Este mínimo es de como máximo 12 px y la mitad del ancho de la pista, por lo que una pista estrecha sigue distinguiendo el progreso incompleto de la finalización. No llena una barra vacía ni cambia los valores semánticos.

Los atributos nativos, `className`, `style` y `ref` se dirigen a la raíz. `className` y `style` pueden recibir el estado del progreso. `render` puede reemplazar la raíz y conservar su semántica. El progreso indeterminado tiene su propia apariencia sin indicar un porcentaje numérico. Las preferencias de movimiento reducido desactivan las transiciones de relleno y el movimiento indeterminado.

Compón [partes de Progress](https://docs.twenty.com/es/ui/primitives/feedback/progress.md) para diseños personalizados o animación específica. La temporización específica, la aparición gradual, los destellos, los resortes y las devoluciones de llamada de finalización pertenecen a la composición de la aplicación.

## Migración

Reemplaza `ariaLabel` por el atributo nativo `aria-label`. Se eliminan las props `withGrowIn`, `withGlint`, `withSpringFill` y `onGrowInComplete`. Implementa su apariencia, temporización y devoluciones de llamada de finalización en una composición de la aplicación mediante [partes de Progress](https://docs.twenty.com/es/ui/primitives/feedback/progress.md). El atributo nativo `onAnimationEnd` sigue disponible en la raíz.

## "Props"

**aria-label** `string`

Accessible name identifying the measured operation.

**aria-labelledby** `string`

ID of the visible label that names the operation.

**aria-valuetext** `string`

Human-readable progress value overriding the default formatted value.

**backgroundColor** `string` (default: none)

CSS background color of the track.

**barColor** `string`

CSS color of the filled bar. Defaults to the primary text color.

**children** `ReactNode`

Additional Progress parts or supporting content inside the root.

**className** `string | ((state: ProgressRootState) =\> string | undefined)`

Class applied to the progress root, or a callback receiving its status.

**format** `NumberFormatOptions`

Intl.NumberFormat options for the clamped numeric value. The default displays the normalized percentage.

**getAriaValueText** `((formattedValue: string, value: number | null) =\> string)`

Receives the formatted value and raw value, including null, and returns an accessible value description.

**locale** `LocalesArgument`

Locale or locale list used to format the value. Defaults to the runtime locale.

**max** `number` (default: 100)

Inclusive maximum. Defaults to 100.

**min** `number` (default: 0)

Inclusive minimum. Defaults to 0.

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

Ref to the root div, or the element composed through render.

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

Composes the root with an element or render callback. Forward the supplied props and ref to retain progress semantics.

**size** `"md" | "sm"` (default: md)

Bar height: sm (6px) or md (8px).

**style** `CSSProperties | ((state: ProgressRootState) =\> CSSProperties | undefined)`

Inline styles applied to the progress root, or a callback receiving its status.

**value** `number | null` *required*

Controlled value in the min/max range. Use null for indeterminate progress.

**withBorderRadius** `boolean` (default: false)

Rounds the track and indicator corners.

**withMinimumFillWidth** `boolean` (default: true)

Applies a cosmetic minimum of up to 12px, capped at half the track width, only above the minimum and below completion.


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