إنشاء مؤشر نشاط دوار في جافا سكريبت باستخدام jQuery

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

الحاجة إلى مؤشر النشاط

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

ما هو مؤشر النشاط الدوار؟

يشار إلى مؤشر النشاط الدوار غالباً باسم مؤشر نشاط Ajax. وهذا يعني بشكل أساسي أنه يشير إلى عملية في الخلفية أو مكالمة Ajax. قد يكون المستخدمون قد واجهوا هذه المؤشرات في العديد من التطبيقات، مثل:

• تحميل علامات تبويب جديدة في متصفحات الويب مثل Firefox
• شاشات التمهيد في أنظمة التشغيل مثل macOS
• تطبيقات الويب المختلفة عندما ينتظرون البيانات

كيفية إنشاء مؤشر نشاط دوار

الخطوة 1: العثور على صورة الدوار

الخطوة الأولى في تطبيق مؤشر دوار هي الحصول على الصورة الفعلية. يمكنك بسهولة العثور على العديد من صور GIF المتحركة التي تتصف بكونها دوارات من خلال بحث بسيط على Google عن “مؤشر نشاط Ajax”.

مصدر ممتاز لصور الدوار هو AjaxLoad. هنا، يمكنك تخصيص وتنزيل تصميم دوار تفضله.

الخطوة 2: إعداد هيكل HTML الخاص بك

قم بإدراج صورة الدوار في HTML حيث تريد أن تظهر. على سبيل المثال، يمكنك وضعها داخل عنصر <div> ضمن جدول أو ببساطة كعنصر مستقل:

<div id="spinner" style="display: none;">
    <img src="path_to_your_spinner_image.gif" alt="جارٍ التحميل..." />
</div>

الخطوة 3: استخدام jQuery للتبديل بين الرؤية

الآن بعد أن قمت بإعداد HTML الخاص بك، يمكنك الاستفادة من jQuery لإظهار أو إخفاء الدوار عند بدء أو اكتمال مهمة. إليك طريقة بسيطة للقيام بذلك:

$(document).ready(function() {
    $("#yourButton").click(function() {
        $("#spinner").show(); // إظهار الدوار عند النقر على الزر
        
        // محاكاة مهمة طويلة الأمد باستخدام setTimeout
        setTimeout(function() {
            $("#spinner").hide(); // إخفاء الدوار بعد اكتمال المهمة
        }, 3000); // ضبط المدة حسب الحاجة
    });
});

شرح الكود:

• إظهار الدوار: عندما يتم تفعيل إجراء معين (مثل النقر على زر)، يتم تغيير رؤية الدوار لإظهار.
• محاكاة المهمة: لأغراض العرض، تقوم دالة setTimeout بمحاكاة مهمة طويلة الأمد. في الممارسة العملية، ستكون هذه هي النقطة التي يتم فيها إجراء مكالمة Ajax.
• إخفاء الدوار: بمجرد اكتمال المهمة، يتم إخفاء الدوار مرة أخرى.

في الختام

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

لا تتردد في تجربة تصميمات دوار مختلفة ودمجها في مشاريع الويب الخاصة بك. برمجة سعيدة!