
- استخدام
- المحددات
شريط التقدم الدائري
يشير إلى تقدم المهمة، ويستخدم غالباً في شاشات التحميل أو الأماكن التي ترغب فيها في إبلاغ العمليات الجارية إلى المستخدم.- استخدام
- الخصائص

import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};
| المحددات | النوع | الوصف | الإعداد الافتراضي |
|---|---|---|---|
| المدة | رقم | إجمالي مدة الرسوم المتحركة لشريط التقدم بالميلي ثانية | 3 |
| التأخير | رقم | The delay in starting the progress bar animation in milliseconds | 0 |
| التخفيف | نص | وظيفة التخفيف للرسوم المتحركة لشريط التقدم | easeInOut |
| ارتفاع الشريط | رقم | ارتفاع الشريط بالبكسل | 24 |
| لون الشريط | نص | لون الشريط | gray80 |
| التشغيل التلقائي | قيمة منطقية | إذا كان true، فإن الرسوم المتحركة لشريط التقدم تبدأ تلقائيًا عند تحميل المكون | صحيح |
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
| الخصائص | النوع | الوصف | الإعداد الافتراضي |
|---|---|---|---|
| الحجم | رقم | حجم شريط التقدم الدائري | 50 |
| عرض الشريط | رقم | عرض خط شريط التقدم | 5 |
| لون الشريط | نص | لون شريط التقدم | currentColor |
هل كانت هذه الصفحة مفيدة؟