<progress>
يتيح لك مكون <progress> المدمَج في المتصفح عرض مؤشر التقدم
<progress value={0.5} />
المرجع
<progress>
لعرض مؤشر التقدم، استخدم عنصر <progress> المدمج في المتصفح
<progress value={0.5} />
اطّلع على المزيد من الأمثلة في الأسفل.
الخصائص
يدعم <progress> جميع خصائص العناصر الشائعة
بالإضافة إلى ذالك، يدعم <progress> هذه الخصائص:
max: رقم. يحدد القيمةvalueالقصوى. القيمة الافتراضية هي1.value: رقم بين0وmax، أوnullللتقدم غير المحدد. يحدد مدى الانجاز.
الاستخدام
التحكم في مؤشر التقدم
لعرض مؤشر التقدم قم بتصيير مكون <progress>، يمكنك تمرير قيمة رقمية value بين 0 و القيمة القصوى max التي تحددها. إذا لم تمرر قيمة قصوى max، فبشكل افتراضي ستكون 1.
إذا لم تكن العملية جارية، قم بتمرير value={null} لوضع مؤشر التقدم في حالة غير محددة.
export default function App() {
return (
<>
<progress value={0} />
<progress value={0.5} />
<progress value={0.7} />
<progress value={75} max={100} />
<progress value={1} />
<progress value={null} />
</>
);
}