شريط التقدم

شريط أفقي يُوصّل بصرياً اكتمال مهمة أو عملية.

Loading demo: progressbar-real-world

التثبيت

npx sdaia-ui@latest add progressbar

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

<ProgressBar progress={50} />

شريط تقدم بدون تسمية نصية.

Loading demo: progressbar-label-none

استخدم `label="ضمن السطر"` لإظهار قيمة التقدم جانب التعبئة.

Loading demo: progressbar-inline

استخدم `label="عائم أعلى"` لإظهار تسمية فوق مؤشر التعبئة.

Loading demo: progressbar-top-floating

استخدم `label="عائم أسفل"` لإظهار تسمية تحت مؤشر التعبئة.

Loading demo: progressbar-bottom-floating

استخدم `label="أسفل"` لتسمية ثابتة أسفل عرض المسار الكامل.

Loading demo: progressbar-bottom

خصائص مكوّن ProgressBar.

Prop	Type	Default	Required
progress	number	0	optional
label	'none' \| 'inline' \| 'bottom' \| 'top-floating' \| 'bottom-floating'	'none'	optional
leadingIcon	boolean	false	optional
trailingIcon	boolean	false	optional
valueMin	boolean	false	optional
valueMax	boolean	false	optional
direction	'ltr' \| 'rtl'	'ltr'	optional
animateOnView	boolean	false	optional