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

# Anello di avanzamento

> Mostra un avanzamento misurato o indeterminato in un indicatore circolare compatto.

## Panoramica

`ProgressRing` fornisce un aspetto circolare per [Progress](https://docs.twenty.com/it/ui/primitives/feedback/progress.md). Condivide il contratto del componente radice relativo a intervallo personalizzato, null, formattazione, etichettatura, prop nativa, ref e render. I figli facoltativi visualizzano un valore preformattato accanto all'anello.

**Light**

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

**Dark**

[Esempio di anello di avanzamento (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)

## Utilizzo

Fornisci il valore controllato non elaborato e un nome accessibile. Usa `aria-valuetext` quando un valore formattato spiega l'avanzamento più chiaramente di una percentuale.

```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` per associare l'anello a un'etichetta visibile esistente oppure componi `Progress.Label` come figlio. I figli preformattati non forniscono automaticamente il nome accessibile dell'anello.

## Avanzamento e intervalli controllati

L'applicazione calcola `value` e formatta il contenuto visualizzato. L'anello non recupera dati, non fa avanzare l'avanzamento né calcola quote. Il valore predefinito di `min` è `0` e quello di `max` è `100`. I valori finiti vengono limitati all'intervallo per i valori semantici e la geometria dell'arco. L'arco si riempie in base alla percentuale normalizzata, anche quando il minimo non è zero.

**Light**

[Avanzamento circolare in un intervallo personalizzato (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressring-progressring--custom-range\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Avanzamento circolare in un intervallo personalizzato (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)

Passa `value={null}` per l'avanzamento indeterminato. L'anello omette `aria-valuenow` e visualizza un arco indeterminato. Anche i valori non finiti rimangono indeterminati; non diventano zero né completamento. Il contenuto visualizzato rimane controllato dall'applicazione.

Usa `locale`, `format` e `getAriaValueText` come descritto in [Progress](https://docs.twenty.com/it/ui/primitives/feedback/progress.md). Componi `Progress.Value` per visualizzare il valore formattato del componente radice.

Usa [ProgressBar](https://docs.twenty.com/it/ui/primitives/feedback/progress-bar.md) per l'avanzamento orizzontale oppure [MetricRow](https://docs.twenty.com/it/ui/components/data-display/metric-row.md) per un'etichetta e un valore allineato.

## Aspetto e composizione

`size="md"` visualizza un anello di 16px; `size="sm"` visualizza un anello di 14px. Entrambi usano un tratto di 2px e si riempiono in senso orario dall'alto. `barColor` accetta colori CSS, incluse le variabili del tema. L'SVG è decorativo e nascosto alle API di accessibilità.

Le modifiche del valore vengono animate per 300ms. Le preferenze per la riduzione del movimento disabilitano la transizione e la rotazione indeterminata. Gli attributi nativi, `className`, `style` e `ref` si applicano all'elemento di avanzamento esterno. `className` e `style` possono ricevere lo stato di avanzamento. `render` può sostituire il componente radice mantenendone la semantica.

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