إنشاء شريط تقدم تصميم المواد بسهولة مع Mprogress.js

لا يوجد إنكار أن جوجل تصميم المواد قد غير جذري الويب. إنه يقدم لغة التصميم المشتركة يمكن لمصممي واجهة المستخدم تطبيقها على جميع مواقع الويب وتطبيقات الأجهزة المحمولة.

لقد أدى اتجاه تصميم المواد هذا إلى العديد من المكتبات ، بما في ذلك إطار عمل Materialize الشهير. واحد من أروع مشاريع المواد الجديدة لقد وجدت هو Mprogress.js.

هذه المكتبة جافا سكريبت يولد شريط التقدم على غرار المواد باستخدام CSS النقي وجافا سكريبت. لا التبعيات, لا هراء. ما عليك سوى التحميل البسيط (والتحميل المسبق) بمظهر تصميم المواد الذي يتطابق مع أي موقع ويب أو تطبيق ويب.

الإعداد بسيط جدا و يتطلب فقط ملفين: CSS و JS script من Mprogress.

يمكنك تحميل كليهما من جيثب ريبو أو استخدام مدير الحزمة مثل npm أو Bower. من هناك ، تحتاج إلى إنشاء كائن Mprogress جديد وأخبره لبدء المحمل.

ويمكن القيام بذلك مع حرفيا سطر واحد من التعليمات البرمجية:

 var mprogress = new Mprogress ('start')؛ 

خصائص أخرى يمكن تطبيقها لتغيير توقيت الحركة أو السرعة أو لون عرض شريط التقدم. هذا التكوين حتى يتيح لك إنشاء قوالب مخصصة بناء على نمط تصميم المواد الافتراضي. رائع!

نلقي نظرة خاطفة على الصفحة التجريبية لرؤية هذا المحمل في العمل. إنه ليس شريط تحميل ساحر ، لكنه يقدم حلاً لطيفًا دون الحاجة إلى إنشاء حل من الصفر.

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

جمال Mprogress.js هو بساطته. إنه لا يخبرك بكيفية هيكلة البيانات أو ما تحتاج إلى تحميله. يمكن أن يكون تحميل الصفحة ، أو يمكن أن يكون التعامل مع تحميل الملف. أو يمكن أن يكون تتبع مدى انتقال المستخدم لأسفل من أعلى الصفحة.

هناك الكثير الذي يمكنك القيام به مع هذه المكتبة ومع صفر التبعيات يمكنك استخدامه لأي مشروع ويب. لتبدأ ، تحقق من ريبو MProgress على جيثب حيث يمكنك أيضا تصفح من خلال كابل بيانات.