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

> اعرض تقدّمًا مقاسًا أو غير محدد بشريط أفقي.

## نظرة عامة

يوفر `ProgressBar` مظهرًا أفقيًا لـ [التقدم](https://docs.twenty.com/ar/ui/primitives/feedback/progress.md). يحافظ على العقد الكامل للجذر، بما في ذلك السمات الأصلية والمراجع وتركيب التصيير والتنسيق والنطاقات المخصصة والتقدم غير المحدد. أضف إليه `aria-label` يحدد العملية.

**Light**

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

**Dark**

[مثال على 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)

## استخدام

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

## ملكية الحالة والنطاقات

`value` مطلوب ويتحكم فيه التطبيق. لا يوجد وضع `defaultValue`. لا يبدأ المكوّن طلبًا ولا يقدّم التقدم من تلقاء نفسه. مرّر `null` عندما يكون التقدم غير معروف. تظل القيم غير المحدودة أيضًا غير محددة.

القيمة الافتراضية لـ `min` هي `0`، والقيمة الافتراضية لـ `max` هي `100`. تُقيَّد القيم المحدودة ضمن النطاق للقيمة الدلالية والتعبئة المطبّعة. تملأ القيمة `70` ضمن النطاق من `20` إلى `120` نصف الشريط وتعرض `50%`، بينما يبقى `aria-valuenow` بقيمة `70`.

**Light**

[حد أدنى غير صفري وحد أقصى مخصص (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--custom-range\&viewMode=story\&globals=colorScheme:light)

**Dark**

[حد أدنى غير صفري وحد أقصى مخصص (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)

استخدم `aria-valuetext` و`getAriaValueText` و`locale` و`format` كما هو موضح في [التقدم](https://docs.twenty.com/ar/ui/primitives/feedback/progress.md). استخدم أجزاء Progress المركّبة عندما تحتاج التسميات والقيم إلى تخطيط مرئي خاص بها.

استخدم [Toast](https://docs.twenty.com/ar/ui/components/feedback/toast.md) للإشعارات التي تتضمن عدًّا تنازليًا للإغلاق وإيقافًا مؤقتًا عند التمرير.

## المظهر والتركيب

يختار `size` مسارًا بحجم 6px أو 8px. يقبل `barColor` و`backgroundColor` ألوان CSS، بما في ذلك متغيرات النسق. يجعل `withBorderRadius` المسار والمؤشر مستديرين. يحافظ `withMinimumFillWidth` على تعبئة جمالية صغيرة بين الحد الأدنى والإكمال فقط. لا يتجاوز هذا الحد الأدنى 12px ونصف عرض المسار، لذا يظل المسار الضيق يميّز التقدم غير المكتمل عن الإكمال. لا يملأ شريطًا فارغًا ولا يغيّر القيم الدلالية.

تستهدف السمات الأصلية و`className` و`style` و`ref` العنصر الجذر. يمكن أن يتلقى `className` و`style` حالة التقدم. يمكن لـ `render` استبدال العنصر الجذر مع الحفاظ على دلالاته. للتقدم غير المحدد مظهره الخاص دون عرض نسبة مئوية رقمية. تعطّل تفضيلات تقليل الحركة انتقالات التعبئة والحركة غير المحددة.

ركّب [أجزاء Progress](https://docs.twenty.com/ar/ui/primitives/feedback/progress.md) للتخطيطات المخصصة أو الرسوم المتحركة الخاصة بالميزات. تنتمي توقيتات الميزات، وتأثير الظهور التدريجي، واللمعان، والنوابض، واستدعاءات الإكمال إلى تركيب التطبيق.

## الترحيل

استبدل `ariaLabel` بـ `aria-label` الأصلي. تمت إزالة الخصائص `withGrowIn` و`withGlint` و`withSpringFill` و`onGrowInComplete`. نفّذ مظهرها وتوقيتها واستدعاءات الإكمال في تركيب التطبيق باستخدام [أجزاء Progress](https://docs.twenty.com/ar/ui/primitives/feedback/progress.md). يبقى `onAnimationEnd` الأصلي متاحًا على العنصر الجذر.

## الخصائص

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