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

> Mostra un avanzamento misurato o indeterminato con una barra orizzontale.

## Panoramica

`ProgressBar` fornisce un aspetto orizzontale per [Progress](https://docs.twenty.com/it/ui/primitives/feedback/progress.md). Preserva il contratto completo della radice, inclusi attributi nativi, refs, composizione di rendering, formattazione, intervalli personalizzati e avanzamento indeterminato. Assegna un `aria-label` che identifichi l'operazione.

**Light**

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

**Dark**

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

## Utilizzo

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

## Proprietà dello stato e intervalli

`value` è obbligatorio ed è controllato dall'applicazione. Non esiste una modalità `defaultValue`. Il componente non avvia una richiesta né fa avanzare autonomamente lo stato di avanzamento. Passa `null` quando lo stato di avanzamento è sconosciuto. Anche i valori non finiti rimangono indeterminati.

`min` è impostato per impostazione predefinita su `0` e `max` su `100`. I valori finiti vengono limitati all'intervallo per il valore semantico e il riempimento normalizzato. Un valore di `70` nell'intervallo da `20` a `120` riempie metà della barra e indica `50%`, mentre `aria-valuenow` rimane `70`.

**Light**

[Un minimo diverso da zero e un massimo personalizzato (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--custom-range\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Un minimo diverso da zero e un massimo personalizzato (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` e `format` come descritto in [Stato di avanzamento](https://docs.twenty.com/it/ui/primitives/feedback/progress.md). Usa parti di Progress composte quando etichette e valori necessitano di un proprio layout visibile.

Usa [Toast](https://docs.twenty.com/it/ui/components/feedback/toast.md) per le notifiche con un conto alla rovescia per la chiusura e la pausa al passaggio del mouse.

## Aspetto e composizione

`size` seleziona una traccia di 6px o 8px. `barColor` e `backgroundColor` accettano colori CSS, incluse le variabili del tema. `withBorderRadius` arrotonda la traccia e l'indicatore. `withMinimumFillWidth` mantiene un piccolo riempimento estetico solo tra il minimo e il completamento. Questo minimo è al massimo di 12px e pari a metà della larghezza della traccia, quindi una traccia stretta distingue comunque lo stato di avanzamento incompleto dal completamento. Non riempie una barra vuota né modifica i valori semantici.

Gli attributi nativi, `className`, `style` e `ref` hanno come destinazione la radice. `className` e `style` possono ricevere lo stato di avanzamento. `render` può sostituire la radice preservandone la semantica. Lo stato di avanzamento indeterminato ha un proprio aspetto senza indicare una percentuale numerica. Le preferenze per la riduzione del movimento disabilitano le transizioni di riempimento e il movimento indeterminato.

Componi le [parti di Progress](https://docs.twenty.com/it/ui/primitives/feedback/progress.md) per layout personalizzati o animazioni specifiche. La temporizzazione delle funzionalità, l'espansione iniziale, i bagliori, le molle e le callback di completamento appartengono alla composizione dell'applicazione.

## Migrazione

Sostituisci `ariaLabel` con il `aria-label` nativo. Le props `withGrowIn`, `withGlint`, `withSpringFill` e `onGrowInComplete` vengono rimosse. Implementa il relativo aspetto, la temporizzazione e le callback di completamento in una composizione dell'applicazione usando le [parti di Progress](https://docs.twenty.com/it/ui/primitives/feedback/progress.md). Il `onAnimationEnd` nativo rimane disponibile sulla radice.

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