تحقيق تأثير شريط التقدم باستخدام Javascript و CSS3

الشريط التقدمي يستخدم في العديد من مواقع الويب، وقد تمت شرح تأثير الشريط التقدمي في هذا المقال، والكود المحدد هو كما يلي:

أولاً: خاصية clip في css2 لإنشاء خطوة تقدم صفحة الويب

قبل تنفيذ ذلك، دعنا نقدم شرحًا للخاصية clip، لأن هذه الخاصية لا تستخدم كثيرًا في css2.1، لذا من الضروري أن نتعرف عليها؛

درجة دعم المتصفحات: جميع المتصفحات الرئيسية تدعم خاصية clip.

تم وصف خاصية Clip في موقع w3c كما يلي: عن طريق قطع العنصر لتحكم في منطقة المرئية للعنصر، بشكل افتراضي، لا يتم قطع العنصر.

جملة القطع Clip:

　.xx {clip:rect(<top>, <right>, <bottom>, <left>)}

يجب أن تكون Rect الخاصية تحتوي على أربعة قيم، top,right,bottom,left؛ ويجب فصلها باستخدام逗ات. تتبع نفس قاعدة الساعة اليدوية، مثل order في css.

في css2.1، يتم تحديد القيم المطلقة لل<top>،<bottom> من خلال الزاوية العلوية للعنصر المربع، والقيم المطلقة لل<left>،<right> من خلال الزاوية اليسرى للعنصر المربع. كما في:

يمكننا النظر في عرض دمو بسيط آخر،

كما في css

p#one { clip: rect(5px, 40px, 45px, 5px); }

p#two { clip: rect(5px, 55px, 45px, 5px); }

في المثال السابق، يتم القطع في مستطيل طول 50X55px للحصول على مستطيل خطي:

كما في الشكل التالي:

نحن الآن يمكننا النظر في عرض دمو لخطوة التقدم؛

HTML كود كما يلي:

<div id="progress-box" class="progress-box">
<div id="progress-bar" class="progress-bar"></div>
  <div id="progress-text" class="progress-text">0%</div>
  <div id="status"></div>
</div>

كود CSS كالتالي:

.progress-box{position:absolute;left:0;width:300px;height:60px;border:1px solid #000;margin-left:20px;}
.progress-bar{position:absolute;left:0;top:0;width:300px;height:60px;clip:rect(0px,0px,60px,0px);background:red;}
.progress-text{position:absolute;left:0;top:0;width:300px;height:60px;color:Black;text-align:center; line-height:60px; font-family:Georgia;font-size:2em;font-weight:bold;}

في هذا السياق، يجب توضيح ثلاثة div في HTML العلوية، الأول هو صندوق العنصر (progress-box) وهو يهدف إلى التأكيد على الحدود، وإعلام المستخدم بما يجب أن يكون طول السعة عند 100%.

النوع الثاني من progress-bar هو العنصر الذي يظهر لون الخلفية المتغير كأحمر،

النوع الثالث هو النص الذي يظهر قيمة التقدم.

لإظهار التأثير، نحتاج إلى رمز setInterval بسيط في JavaScript لعرض تأثير شريط التقدم؛ رمز setInterval كما يلي؛

var bar = document.getElementById("progress-bar"),
   text = document.getElementById("progress-text");
max = 300;
   function createXHR(){
var timer = setInterval(progressFn, 30);
function progressFn() {
  if(cent > max) {
    cent = 0;
    timer = setInterval(arguments.callee(), 30);
  }}else {
    bar.style.clip = "rect(0px," + cent + "px,60px,0px)";
    text.innerHTML = Math.ceil((cent / max) * 100) + "%";
    cent++;
  }
}

demo كما يلي تأثير؛ استخدم clip لتوضيح demo التقطيع

النوع الثاني: استخدم أحداث التقدم (progress) للتفاعل مع الخادم لتحقيق شريط التقدم في الصفحة.

أحداث التقدم (progress): تعريف أحداث تتعلق بالتواصل بين العميل والخادم، ويوجد 6 أحداث تقدم.

1. loadstart: يتم تحفيزها عند استلام أول بيت من البيانات الإجابة.
2. progress: يتم تحفيزها باستمرار خلال استلام الإجابة.
3. error: يتم تحفيزها عند حدوث خطأ في الطلب.
4. abort: يتم تحفيزها عند إنهاء الاتصال بسبب استدعاء abort().
5. load: يتم تحفيزها عند استلام البيانات الكاملة للإجابة.
6. loadend: يتم تحفيزها عند إكمال التواصل أو تحفيز أحداث error أو abort أو load.

لا يبدأ كل طلب بتشغيل أحداث Loadstart، بل يتبعه أو أكثر من أحداث progress، ثم يُشغل أحداث error أو abort أو load، وأخيرًا ينتهي بتحفيز أحداث loadend.

التصفحات التي تدعم الأحداث الخمسة الأولى هي Firefox 3.5+،Safari 4+،Chrome،Safari الإصدار iOS وWebKit الإصدار Android.

هذا الحدث سيتم تفعيله بشكل دوري أثناء استقبال المتصفح للبيانات الجديدة. ومع ذلك، سيتمكن معالج الحدث onprogress من استقبال object event، والذي يحتوي على خاصية target هي object XHR، ولكن تحتوي أيضًا على ثلاث خصائص إضافية: lengthComputable، position وtotalSize. حيث أن lengthComputable هي قيمة boolean تُظهر ما إذا كانت معلومات التقدم المتاحة أم لا، والposition هي عدد البايتات التي تم استقبالها حتى الآن، والtotalSize هو عدد البايتات المتوقعة بناءً على رأس Content-Length. ومع هذه المعلومات، يمكننا إنشاء مؤشر تقدم للمستخدم. كما هو موضح في الصورة التالية، تحتوي هذه الصورة على الثلاثة معلمات المذكورة أعلاه؛

HTML كود كما يلي:

<div id="progress-box" class="progress-box">
<div id="progress-bar" class="progress-bar"></div>
  <div id="progress-text" class="progress-text">0%</div>
  <div id="status"></div>
</div>
الكود للتفاعل مع الخادم كالتالي:

var divbar = document.getElementById("progress-bar"),

divText = document.getElementById("progress-text");
  var cent = 0;
max = 300;
  function createXHR(){
var xhr;
   if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
   xhr=new XMLHttpRequest();
     else{ // code for IE6, IE5
   }
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
   return xhr;
 }
 var xhr = createXHR();
 xhr.onload = function() {
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
     alert(xhr.responseText);
  }}else {
     alert("Request was unsuccessful: " + xhr.status);
  }
 }
 xhr.onprogress = function(event) {
  var divStatus = document.getElementById("status");
  if (event.lengthComputable) {
      divStatus.innerHTML = "Received" + event.position + " of " + event.totalSize + " bytes";
      console.log(event.target);
      var percentComplete = Math.round(event.loaded / event.total);
      // يتمثل event.loaded في عدد البايتات التي تم تحميلها حاليًا، وevent.total في إجمالي عدد البايتات،
      console.log(event.loaded, event.total, 300 * percentComplete);
      progressFn(300 * percentComplete, max);
   }
 }
 xhr.open("get", "progress.php", true);
 xhr.send(null); 
 function progressFn(cent,max) {
   if (cent < max) {
     divbar.style.clip = "rect(0px," + cent + "px,60px,0px)";
     divText.innerHTML = Math.ceil((cent / max) * 100) + "%";
   } 
 }

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

<?php
  header("Content-Type: text/plain");
  header("Content-Length: 27");
  echo "Some data";
  flush();
  echo "Some data";
  flush();
  echo "Some data";
  flush();
?>

ثالثًا: تنفيذ شريط التقدم باستخدام تأثير CSS3 والانسياب الخطي demo;

HTML كود كما يلي:

<div id="loading-status">
  <div id="process"></div>
</div>

كود CSS كالتالي:

#loading-status {عرض:300px;حافة:1px solid #669CB8;-webkit-box-shadow: 0px 2px 2px #D0D4D6; -moz-box-shadow:0px 2px 2px #D0D4D6;رؤوس الزوايا: 10px;ارتفاع:20px;ملء: 1px;}
#process {عرض: 80%;ارتفاع: 100%;رؤوس الزوايا: 10px;خلفية: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));-webkit-animation: load 3s ease-out infinite;}
@-webkit-keyframes load {
  0% {
    عرض: 0%;      
  }
  100% {
    عرض: 80%;    
  }
}

النتيجة تبدو كالتالي:

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات لصاحب الحقوق، محتويات تم تقديمها من قبل مستخدمي الإنترنت بشكل تلقائي، لا تملك هذا الموقع حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لتقديم الشكوى، وقدم الدليل الداعم، إذا تم التحقق من صحة الشكوى، سيقوم هذا الموقع بإزالة المحتوى المشبوه فورًا.