كيفية إنشاء شريط تقدم في HTML؟

تُستخدم أشرطة التقدم لتحديد معالم معينة أثناء مهمة ما إلى نسبة مئوية. يمكنك إنشاء شريط تقدم في التي تحدد تقدم إكمال المهمة. يمكن معالجة قيمة شريط التقدم بواسطة JavaScript. في هذه المقالة ، سنرى كيف يمكنك إنشاء شريط تقدم بمساعدة HTML و CSS وجافا سكريبت بالتسلسل التالي:

• كيفية إنشاء شريط تقدم في HTML؟
• شريط التقدم: مثال

هيا نبدأ.

كيفية إنشاء شريط تقدم في HTML؟

يوضح شريط التقدم التقدم المحرز في أي مهمة يتم تنفيذها. بشكل عام ، تُستخدم هذه الأشرطة لإظهار حالة التنزيل والتحميل. يمكننا القول أنه يمكن استخدام أشرطة التقدم لتصوير حالة أي شيء قيد التقدم.

لإنشاء شريط تقدم أساسي باستخدام ، يجب تنفيذ الخطوات التالية:

• إنشاء بنية HTML لشريط التقدم الخاص بك - HTML بطاقة شعار يحدد تقدم إكمال المهمة.

• إضافة CSS - الخطوة التالية هي إضافة لون الخلفية لشريط التقدم بالإضافة إلى حالة التقدم في الشريط بمساعدة CSS .

#Progress_Status {width: 50٪ background-color: #ddd} #myprogressBar {width: 1٪ height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• مضيفا جافا سكريبت - الخطوة التالية هي إنشاء شريط التقدم المتحرك الديناميكي باستخدام وظائف جافا سكريبت تحديث و مشهد .

تحديث الوظيفة () {var element = document.getElementById ('myprogressBar') var width = 1 var هوية = setInterval (مشهد ، 10) مشهد وظيفة () {if (width> = 100) {clearInterval (هوية)} آخر {عرض ++ element.style.width = العرض + '٪'}}}

الآن بعد أن عرفت الخطوات المختلفة لإنشاء شريط تقدم ، دعنا ننتقل ونلقي نظرة على المثال الكامل لشريط التقدم.

شريط التقدم: مثال

بمجرد إكمال الخطوات المختلفة لإنشاء شريط تقدم ، فقد حان الوقت لربط HTML و CSS و عناصر JavaScript . يوضح المثال التالي الكود الكامل لشريط التقدم الذي يربط ما ورد أعلاه HTML و CSS و JavaScript الرموز:

#Progress_Status {width: 50٪ background-color: #ddd} #myprogressBar {width: 2٪ height: 20px background-color: # 4CAF50}
مثال على شريط التقدم باستخدام JavaScript
 
حالة تنزيل ملف:
  
تحديث وظيفة بدء التنزيل () {var element = document.getElementById ('myprogressBar') var width = 1 var هوية = setInterval (مشهد ، 10) مشهد وظيفة () {if (width> = 100) {clearInterval (هوية)} آخر {width ++ element.style.width = العرض + '٪'}}}

انتاج:

بهذا نكون قد وصلنا إلى نهاية مقالتنا. أتمنى أن تكون قد فهمت الخطوات المختلفة المطلوبة لإنشاء شريط تقدم.

تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.

العثور على أكبر عدد في مجموعة جافا

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في هذه المدونة وسنعاود الاتصال بك.