كيفية انشاء شريط التقدم الدائري باستخدام HTML CSS و JavaScript

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

يتيح لك مكون شريط التقدم الدائري إظهار التقدم المحرز في عملية معينة ، باستخدام نمط SVG الدائري كشريط تقدم. يؤدي تغيير إزاحة شرطة الحد وقيم مصفوفة شرطة الحد للشكل الثاني إلى إنشاء تأثير التعبئة.

في هذا البرنامج (شريط التقدم الدائري) ، في البداية ، على صفحة الويب ، يكون شريط التقدم الدائري هذا في المرحلة الأولية حيث لا توجد حركة دائرية للرسوم المتحركة وتتوقف النسبة المئوية لهذا الشريط أيضًا عند 0٪. وعندما تقوم بتحديث المتصفح ، يقوم الشريط الدائري بإنشاء تأثير تعبئة اللون وتبدأ النسبة المئوية لهذا الشريط في الزيادة أيضًا. عندما يكتمل بنسبة 100٪ ، يتوقف تأثير التعبئة عن الملء كما يتوقف رقم النسبة المئوية عن الزيادة أيضًا.

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (شريط التقدم الدائري).

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

إذا كان لديك القليل من المعرفة بجافا سكريبت ، فيمكنك بسهولة فهم أكواد جافا سكريبت لهذا البرنامج وكما تعلم من السهل جدًا فهم CSS وتأثير تعبئة الألوان لهذا البرنامج يعتمد على CSS فقط. إذا كنت تحب هذا البرنامج (شريط التقدم الدائري) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

شريط التقدم الدائري مع النسبة المئوية
لإنشاء هذا البرنامج (شريط التقدم الدائري). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل