9 من أفضل الإضافات المجانية لشريط التقدم jQuery CSS3 للحصول على تجربة مستخدم أفضل 2020

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

بينما يمكننا إنشاء أشرطة تقدم مستقلة وثابتة باستخدام HTML5 و CSS3 أصليين فقط ، يمكننا تضخيم تأثيرات أشرطة التقدم باستخدام JavaScript ، أو بشكل أكثر تحديدًا - مكتبة jQuery. باستخدام jQuery ، يمكننا جعل تقدمنا ​​وأشرطة التحميل تبدو على قيد الحياة ، لإضافة تأثيرات رسوم متحركة ديناميكية وتفاعلية ، ولإضافة تأثيرات العد التنازلي والتحميل التي تجعل صفحاتنا تنبض بالحياة حقًا. هذا ما سنركز عليه هنا ، سنلقي نظرة على بعض من أفضل تقدم jQuery وتحميل ملحقات شريط التحميل التي تم إنشاؤها بمساعدة أحدث تقنيات CSS3 المتاحة.

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

الهدف

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

spin.js

Spin.js كما يوحي الاسم هو عنصر تحميل بسيط للغزل. يمكنك استخدامه للعرض كلما كان ذلك ضروريًا لتحميل عنصر أو استعلام موقع الويب بالكامل. سهل التخصيص وفقًا لمتطلباتك ومعاييرك.

الصورة الرمزية المستديرة مع شريط التقدم الدائري

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

شريط التقدم البسيط للغاية

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

علامة اختيار التقدم

تقدم Checkmark عبارة عن شريط تقدم jQuery مع تطور بسيط عليه في شكل علامة اختيار بمجرد وصوله إلى 100٪. يمكنك تحقيق ذلك عن طريق دفع الشريط السفلي يدويًا ، والذي يؤثر في نفس الوقت على شريط التقدم الدائري. إذا كنت بحاجة إلى شيء آخر ، فقد تعمل هذه الميزة بشكل رائع مع مشروعك. تجدر الإشارة إلى أنه يمكنك أن تتعارض مع الاتجاه العام وتجنب استخدام الإعدادات الافتراضية كما هي. مع وضع ذلك في الاعتبار ، قم بتغيير وضبط علامة اختيار التقدم حسب رغبتك وانتقل من هناك. العب معها على CodePen وشاهد ما هو ممكن دون الحاجة إلى البدء من الألف إلى الياء.

تحميل

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

ProgressBar.js

يستخدم ProgressBar.js الرسوم المتحركة SVG لتوفير تجربة شريط تقدم من شأنها أن تدلي ببيان. يمكنك استخدامه لإنشاء تأثيرات شريط التحميل لعمليات تحميل الملفات ، أو للتحقق من النماذج (مثل قوة كلمة المرور) ، أو لمجرد استخدامها داخل استعلام تم تنفيذه داخل الصفحة.

شريط تقدم jQuery المتميز وتحميل شريط الإضافات

مع وجود العديد من أشرطة التقدم والرافعات الجميلة للاختيار من بينها بالفعل ، هل هناك أي شيء آخر في السوق قد نرغب في استكشافه؟ نحن نختتم قائمتنا بإدراج العديد من ملحقات jQuery المتميزة لعرض أشرطة التحميل والتقدم. علاوة على ذلك ، نشعر أن هذه هي المشاريع التي تستحق الاستثمار ، اعتمادًا على مشاريع الويب الحالية التي تعمل عليها.

EasyLoader

يمنحك EasyLoader وظيفة إنشاء تأثيرات متحركة بعد تحميل صفحات موقع الويب الخاص بك. يمكنك أيضًا استخدامه للترويج لصفحات أخرى ، وإنشاء تنبيهات إشعارات ، وعناصر تشير إلى تحميل الصفحة بالكامل. سهل العمل به ، ويأتي مع حزمة دعم مدتها ستة أشهر.

البطيخ HTML5

يعد MelonHTML5 أحد أكثر برامج التحميل المسبق رواجًا في السوق. يمكنك بسهولة استخدام MelonHTML5 لتحميل المحتوى المرئي مسبقًا قبل ظهور أي شيء آخر على صفحة الويب. يمكنك أيضًا عرض تقدم التحميل لأي نوع من تفاعل موقع الويب. هناك مجموعة متنوعة من الأساليب للاختيار من بينها. علاوة على ذلك ، يكتشف المكون الإضافي وحدات التخزين المؤقت والمكونات الإضافية لضمان أقصى قدر من الإتاحة للمحتوى الذي يعمل به.