<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} /> </> ); }