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

> Afișați progresul măsurat sau nedeterminat cu o bară orizontală.

## Prezentare generală

`ProgressBar` oferă un aspect orizontal pentru [Progress](https://docs.twenty.com/ro/ui/primitives/feedback/progress.md). Păstrează contractul complet al rădăcinii, inclusiv atributele native, referințele, compunerea randării, formatarea, intervalele personalizate și progresul nedeterminat. Oferiți-i un `aria-label` care identifică operațiunea.

**Light**

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

**Dark**

[Exemplu 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)

## Utilizare

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

## Proprietatea asupra stării și intervalele

`value` este obligatoriu și controlat de aplicație. Nu există un mod `defaultValue`. Componenta nu pornește o solicitare și nu avansează progresul de una singură. Transmiteți `null` când progresul este necunoscut. Valorile nefinite rămân, de asemenea, nedeterminate.

`min` are implicit valoarea `0`, iar `max` are implicit valoarea `100`. Valorile finite sunt limitate la interval pentru valoarea semantică și umplerea normalizată. O valoare de `70` în intervalul de la `20` la `120` umple jumătate din bară și raportează `50%`, în timp ce `aria-valuenow` rămâne `70`.

**Light**

[Un minim diferit de zero și un maxim personalizat (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--custom-range\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Un minim diferit de zero și un maxim personalizat (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)

Utilizați `aria-valuetext`, `getAriaValueText`, `locale` și `format` după cum este descris în [Progres](https://docs.twenty.com/ro/ui/primitives/feedback/progress.md). Utilizați părți Progress compuse când etichetele și valorile necesită propria lor dispunere vizibilă.

Utilizați [Toast](https://docs.twenty.com/ro/ui/components/feedback/toast.md) pentru notificări cu numărătoare inversă pentru închidere și pauză la trecerea cursorului.

## Aspect și compoziție

`size` selectează o pistă de 6 px sau de 8 px. `barColor` și `backgroundColor` acceptă culori CSS, inclusiv variabile de temă. `withBorderRadius` rotunjește pista și indicatorul. `withMinimumFillWidth` păstrează o mică umplere cosmetică doar între minim și finalizare. Acest minim este de cel mult 12 px și jumătate din lățimea pistei, astfel încât o pistă îngustă distinge în continuare progresul incomplet de finalizare. Nu umple o bară goală și nu modifică valorile semantice.

Atributele native, `className`, `style` și `ref` vizează rădăcina. `className` și `style` pot primi starea progresului. `render` poate înlocui rădăcina păstrându-i semantica. Progresul nedeterminat are propriul aspect fără a raporta un procent numeric. Preferințele pentru mișcare redusă dezactivează tranzițiile de umplere și mișcarea nedeterminată.

Compuneți [părți Progress](https://docs.twenty.com/ro/ui/primitives/feedback/progress.md) pentru dispuneri personalizate sau animații ale funcționalităților. Temporizarea funcționalităților, creșterea la apariție, sclipirile, arcurile și apelurile inverse la finalizare aparțin compoziției aplicației.

## Migrare

Înlocuiți `ariaLabel` cu `aria-label` nativ. Proprietățile `withGrowIn`, `withGlint`, `withSpringFill` și `onGrowInComplete` sunt eliminate. Implementați aspectul, temporizarea și apelurile inverse la finalizare în compoziția unei aplicații folosind [părți Progress](https://docs.twenty.com/ro/ui/primitives/feedback/progress.md). `onAnimationEnd` nativ rămâne disponibil în rădăcină.

## Proprietăți

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