إنشاء أشرطة تقدم استجابة مخصصة مع ProgressBar.js
أشرطة التقدم معروفة على نطاق واسع من قبل معظم المستخدمين على شبكة الإنترنت. للمطورين ، غالبًا ما تكون عملية معقدة إنشاء شريط التقدم من الصفر. لكن مع ProgressBar.js ليس لديك ل!
هذه المكتبة الحرة مفتوحة المصدر لا يوجد لديه التبعيات و يدعم جميع المتصفحات الرئيسية, بما في ذلك IE9+.
افتراضيا ، يمكنك استخدام شريط بسيط, أو يمكنك ذلك اختر من بعض الأشكال الأساسية, مثل:
- سطر واحد
- نصف دائرة
- دائرة كاملة
- ميدان
- مثلث
يمكنك أيضا تصميم الأشكال المخصصة الخاصة بك مثل القلب ، سحابة ، أو حتى حروف شعار موقع الويب الخاص بك. منحت هذا سيستغرق بعض الجهد ولكن النتيجة النهائية يمكن أن تكون لا تصدق.
المكتبة يعمل على مسارات SVG, لذلك إذا كنت تستطيع بناء شكل محدد باستخدام SVG العلامات يمكنك تحريكه مع هذه المكتبة شريط التقدم.
الرسوم المتحركة يمكن أيضا تضمين النص أو لديها أنماط مخصصة بدء / توقف. API الكامل لديه مزيد من التفاصيل مع الخيارات / الاسترجاعات يمكنك الاطلاع على وقت فراغك.
تقدم ProgressBar.js أيضًا صغير دليل التثبيت حيث يمكنك قم بتنزيل وإعداد البرنامج النصي باستخدام Bower أو npm أو صفحة GitHub الأكثر بساطة.
وإذا قمت ببناء أي شيء رائع يمكنك يقدم الرمز الخاص بك إلى GitHub repo. المبدع المشروع ، كيمو برونفلت لديه قضية جيثب المفتوحة حيث يمكنك تقديم تصاميم مخصصة ليتم تضمينها في المكتبة.
يمكنك إضافة أشرطة التقدم المتحركة لتسجيل الصفحات أو تحميل الحقول أو إلى أي صفحة ويب كمحمل تحميل مسبق. الخيارات محدودة فقط بواسطة كيف مفصلة أنت على استعداد للحصول عليها.
على سبيل المثال ، أنا أحب التجريبي متر قوة كلمة المرور منذ ذلك الحين يخدم غرض حقيقي و يفيد تجربة المستخدم. هذا المثال يأتي تعبئتها مع البرنامج المساعد, حتى تتمكن من نسخ هذا وتعديله حسب رغبتك.
لترى مزيد من الأمثلة, تحقق من الصفحة ProgressBar.js الرئيسية أو إلقاء نظرة خاطفة على هذا الكمان الذي يعرض الرسوم المتحركة للقلب.
