شريط تقدم عملية ما (ProgressBar) بإستخدام CSS مع جافا سكربت

سأقوم لاحقا إن شاء الله بشرح طريقة إستخدام شريط التقدم أو الـProgress Bar بإستخدام CSS مع جافا سكربت 😛
شريط تقدم CSS-ProgressBar

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

كل ماعليك عمله هو تحديد النسبة المئوية للشريط 😎 و سيقوم الكود بتعبئة الشريط بالحركة التي تستخدم جافا سكربت. :mrgreen:

مع العلم بأن الحركة التي تظهر تتطلب أن يكون الجافا سكربت مفعلا في المتصفح.

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

    8 تعليقات

    1. MiLyAni · 15 سبتمبر 2007

      حلو

      وابشرك شغال تمام
      في
      Safari 3

    2. MyStyle · 15 سبتمبر 2007

      ممتاز :mrgreen:

      في انتظار الطريقة و طريقة تحرك الشريط حلوة

    3. Ala7lam · 16 سبتمبر 2007

      ملياني،

      أهلين، كل عام و انت بخير.

      حاجة حلوة انه شغال في سفاري من دون مشاكل 😉

    4. Ala7lam · 16 سبتمبر 2007

      MyStyle،

      نعم الطريقة حلوة و تضيف شئ من الحركة :mrgreen: .

    5. مايا · 24 سبتمبر 2007

      كيف يتم تحديد النسبة ؟ بالربط بداتابيس أم تحدد الرقم فقط ؟ 💡

    6. Ala7lam · 24 سبتمبر 2007

      يمكن الربط بالداتابيس لإستخراج قيم (أرقام) لكل خانة لكن أنا أستخدمها بشكل يدوي عن طريق كتابة رقم 10% أو 50% إلخ، في الخانة حسب نسبتها.
      اعتبرها كجدول تكتب في كل صف قيمته المئوية كما سيتضح لاحقا عند عرض الطريقة. 😆

      و ياهلا فيك

    7. هنادي · 23 أبريل 2012

      يعطيك الف عافية على هذا المجهود..
      وبكل صراحة اهنئك على هذه المدونة الرائعة..

      وللفائدة هذا موقع للجافا جيد وبه دروس متجددة ارجو ان ينال اعجابكم
      http://programming.inbrief.ws/ar/java

    8. Nansi Ahmed · 30 مايو 2012

      رائع جدا بارك الله فيك

    اترك رد

    تابعني =)
    إشترك ليصلك إشعار فور نشر أي مشاركة في موقعي.

    Join other followers

    Powered By WPFruits.com