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

# Anillo de progreso

> Muestra un progreso medido o indeterminado en un indicador circular compacto.

## Resumen

`ProgressRing` proporciona una apariencia circular para [Progress](https://docs.twenty.com/es/ui/primitives/feedback/progress.md). Comparte el rango personalizado, el valor nulo, el formato, el etiquetado, la propiedad nativa, la referencia y el contrato de renderizado de la raíz. Los elementos secundarios opcionales muestran un valor preformateado junto al anillo.

**Light**

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

**Dark**

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

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

## Uso

Proporciona el valor controlado sin procesar y un nombre accesible. Use `aria-valuetext` cuando un valor con formato explique el progreso con más claridad que un porcentaje.

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

export const ImportProgress = () => (
  <ProgressRing
    value={600}
    max={1000}
    aria-label="Importing records"
    aria-valuetext="600 of 1,000 records"
  >
    600 / 1,000
  </ProgressRing>
);
```

Usa `aria-labelledby` para asociar el anillo con una etiqueta visible existente o compón `Progress.Label` como elemento secundario. Los elementos secundarios preformateados no proporcionan automáticamente el nombre accesible del anillo.

## Progreso y rangos controlados

La aplicación calcula `value` y formatea el contenido mostrado. El anillo no obtiene datos, no avanza el progreso ni calcula cuotas. `min` tiene como valor predeterminado `0` y `max` tiene como valor predeterminado `100`. Los valores finitos se limitan al rango para los valores semánticos y la geometría del arco. El arco se rellena según el porcentaje normalizado, incluso cuando el mínimo no es cero.

**Light**

[Progreso circular en un rango personalizado (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressring-progressring--custom-range\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Progreso circular en un rango personalizado (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressring-progressring--custom-range\&viewMode=story\&globals=colorScheme:dark)

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

Pasa `value={null}` para el progreso indeterminado. El anillo omite `aria-valuenow` y muestra un arco indeterminado. Los valores no finitos también permanecen indeterminados; no se convierten en cero ni en finalización. El contenido mostrado sigue estando controlado por la aplicación.

Usa `locale`, `format` y `getAriaValueText` como se describe en [Progress](https://docs.twenty.com/es/ui/primitives/feedback/progress.md). Compón `Progress.Value` para mostrar el valor formateado de la raíz.

Usa [ProgressBar](https://docs.twenty.com/es/ui/primitives/feedback/progress-bar.md) para el progreso horizontal o [MetricRow](https://docs.twenty.com/es/ui/components/data-display/metric-row.md) para una etiqueta y un valor alineado.

## Apariencia y composición

`size="md"` representa un anillo de 16 px; `size="sm"` representa un anillo de 14 px. Ambos usan un trazo de 2 px y se rellenan en el sentido de las agujas del reloj desde la parte superior. `barColor` acepta colores CSS, incluidas las variables de tema. El SVG es decorativo y está oculto para las API de accesibilidad.

Los cambios de valor se animan durante 300 ms. Las preferencias de movimiento reducido desactivan la transición y la rotación indeterminada. Los atributos nativos, `className`, `style` y `ref` se aplican al elemento de progreso externo. `className` y `style` pueden recibir el estado del progreso. `render` puede reemplazar la raíz y conservar su semántica.

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

**barColor** `string`

CSS color of the filled arc. Defaults to the blue theme color.

**children** `ReactNode`

Optional preformatted value or Progress parts displayed before the ring.

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

Ring diameter: sm (14px) or md (16px). Defaults to md.

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


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