دائرة التقدم

مؤشر تقدم دائري لتتبّع اكتمال المهام أو حالات التحميل.

Loading demo: progresscircle-real-world

التثبيت

npx sdaia-ui@latest add progresscircle

import { ProgressCircle } from "@/components/ui/progress-circle"

<ProgressCircle progress={75} />

استخدم الحجم `xSmall` للتخطيطات المضمَّنة أو المختصرة.

Loading demo: progresscircle-sizes

دائرة التقدم الأساسية الافتراضية.

Loading demo: progresscircle-default

استخدم `style="محايد"` للحصول على قوس رمادي ممتلئ.

Loading demo: progresscircle-neutral

استخدم `shape="Half Circle"` للحصول على قوس بأسلوب قياس.

Loading demo: progresscircle-half-circle

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

Prop	Type	Default	Required
value	number	0	optional
variant	'primary' \| 'neutral'	'primary'	optional
shape	'circle' \| 'half-circle'	'circle'	optional
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	optional
valueText	boolean	true	optional
labelText	boolean	false	optional
label	string	'Active Users'	optional
direction	'ltr' \| 'rtl'	'ltr'	optional
animateOnView	boolean	false	optional