البناء · جديد

مؤشرات التقدم

تُظهر مقدار ما أُنجز من مهمة: الرفع والأهداف والخطوات. استخدمها حين يمكن قياس التقدم، ومؤشر التحميل حين لا يمكن.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/progress

الاعتماديات التي يضيفها: @base-ui/react

import { ProgressBar } from "@/components/ui/progress";

<ProgressBar value={60} label="Uploading statement.pdf" />

‏sm وmd وlg بارتفاع 2 و4 و8 بكسل؛ وvalue={null} يُظهر خطوطًا مائلة حين لا يُعرف المقدار.

ProgressBarStepped من 3 إلى 8 خطوات: المكتملة والحالية والقادمة، ويُقرأ «الخطوة 3 من 8».

ProgressCircle لصفوف الرفع والمساحات الصغيرة، بمقاس 16 أو 20 أو 24، ويحتاج label.

الخاصية	النوع	الافتراضي	الوصف
`value`	`number \| null`		المُنجز من `min` إلى `max`؛ `null` غير محدد.
`min / max`	`number`	`0 / 100`	المدى.
`label`	`ReactNode`		ما يتقدم.
`showValue`	`boolean`	`true`	خاصية Show text: النسبة في نهاية السطر.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	خاصية Size.
`numerals / aria-label`	`…`		نظام الأرقام، والاسم إن لم توجد تسمية ظاهرة.

الخاصية	النوع	الوصف
`steps`	`number`	من 3 إلى 8.
`current`	`number`	الخطوات المكتملة؛ التالية قيد التنفيذ.
`label / size`	`…`	التسمية أسفل الشريط، والمقاس.

الخاصية	النوع	الافتراضي	الوصف
`value / min / max`	`number`		كما في الشريط.
`label`	`string`		مطلوب: لا نص ظاهر.
`size`	`16 \| 20 \| 24`	`16`	المقاس.

‏role="progressbar" مع aria-valuenow وaria-valuemin وaria-valuemax ونص القيمة، ومسمّى بتسميته.
لا تعرضه لانتظار أقل من ثانية، ولا تجعله يعود للخلف.