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

# Inel de progres

> Afișați progresul măsurat sau nedeterminat într-un indicator circular compact.

## Prezentare generală

`ProgressRing` oferă un aspect circular pentru [Progress](https://docs.twenty.com/ro/ui/primitives/feedback/progress.md). Acesta partajează contractul componentei rădăcină pentru intervalul personalizat, null, formatare, etichetare, proprietatea nativă, ref și render. Elementele copil opționale afișează o valoare preformatată lângă inel.

**Light**

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

**Dark**

[Exemplu de inel de progres (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)

## Utilizare

Furnizați valoarea brută controlată și un nume accesibil. Utilizați `aria-valuetext` atunci când o valoare formatată explică progresul mai clar decât un procentaj.

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

Utilizați `aria-labelledby` pentru a asocia inelul cu o etichetă vizibilă existentă sau compuneți `Progress.Label` ca element copil. Elementele copil preformatate nu furnizează automat numele accesibil al inelului.

## Progres și intervale controlate

Aplicația calculează `value` și formatează conținutul afișat. Inelul nu preia date, nu avansează progresul și nu calculează cote. `min` are implicit valoarea `0`, iar `max` are implicit valoarea `100`. Valorile finite sunt limitate la interval pentru valorile semantice și geometria arcului. Arcul se umple în funcție de procentajul normalizat, inclusiv când minimul nu este zero.

**Light**

[Progres circular într-un interval personalizat (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressring-progressring--custom-range\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Progres circular într-un interval personalizat (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)

Transmiteți `value={null}` pentru progres nedeterminat. Inelul omite `aria-valuenow` și afișează un arc nedeterminat. Valorile nefinite rămân, de asemenea, nedeterminate; nu devin zero sau finalizare. Conținutul afișat rămâne controlat de aplicație.

Utilizați `locale`, `format` și `getAriaValueText` conform descrierii din [Progress](https://docs.twenty.com/ro/ui/primitives/feedback/progress.md). Compuneți `Progress.Value` pentru a afișa valoarea formatată a componentei rădăcină.

Utilizați [ProgressBar](https://docs.twenty.com/ro/ui/primitives/feedback/progress-bar.md) pentru progres orizontal sau [MetricRow](https://docs.twenty.com/ro/ui/components/data-display/metric-row.md) pentru o etichetă și o valoare aliniată.

## Aspect și compunere

`size="md"` redă un inel de 16px; `size="sm"` redă un inel de 14px. Ambele utilizează un contur de 2px și se umplu în sensul acelor de ceasornic, pornind de sus. `barColor` acceptă culori CSS, inclusiv variabile de temă. SVG-ul este decorativ și ascuns din API-urile de accesibilitate.

Modificările valorii sunt animate timp de 300ms. Preferințele pentru mișcare redusă dezactivează tranziția și rotația nedeterminată. Atributele native, `className`, `style` și `ref` vizează elementul extern de progres. `className` și `style` pot primi starea progresului. `render` poate înlocui componenta rădăcină păstrându-i semantica.

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

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