لدي كود جافاسكريبت يعمل لمهمة معينة عند النقر على الزر وأريد أن أضيف له مؤقت أو عداد تنازلي مثل (جاري التحميل..)

Mohamed Kasem2 · 31 يوليو 2023

أريد أن يظهر مثل هذا الشكل على سبيل المثال عند النقر على الزر مع إبقاء مهمة كود الجافاسكريبت على حالها

waiting.gif.493e3434f43f7c49451c7d93d9a99406.gif

Mustafa Suleiman · 31 يوليو 2023

ما تحتاج إليه يدعى loaders أو Spinners ويتم إنشائها من خلال CSS، وستجد العديد من النماذج الجاهزة على الإنترنت ولست بحاجة إلى إنشاء loader من البداية مثلاً لو بحثت عن css loader ستجد مواقع ومنها:

وكل ما عليك هو نسح كود HTML وCSS للشكل الذي نال إعجابك، ثم تمضينه في مشروعك وكتابة كود جافاسكريبت لعرض الـ Loader في الوقت المناسب وإليك مثال لشكل اخترته من المواقع السابقة:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <script defer src="js/scripts.js"></script>
    <title>Document</title>
  </head>
  <body style="background-color: black">
    <button id="loaderBtn">ابدأ التحميل</button>
    <div class="loader-container">
      <span class="loader"></span>
    </div>
  </body>
</html>

CSS:

.loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 6rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: pulsOut 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
}
.loader:before {
  width: 100%;
  padding-bottom: 100%;
  box-shadow: inset 0 0 0 1rem #fff;
  animation-name: pulsIn;
}
.loader:after {
  width: calc(100% - 2rem);
  padding-bottom: calc(100% - 2rem);
  box-shadow: 0 0 0 0 #fff;
}

.loader-container .loader {
  display: none;
}

@keyframes pulsIn {
  0% {
    box-shadow: inset 0 0 0 1rem #fff;
    opacity: 1;
  }
  50%,
  100% {
    box-shadow: inset 0 0 0 0 #fff;
    opacity: 0;
  }
}

@keyframes pulsOut {
  0%,
  50% {
    box-shadow: 0 0 0 0 #fff;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem #fff;
    opacity: 1;
  }
}

لاحظ أنني نسخت الكود ولكن أضفت له التنسيق التالي من أجل إظهار وإخفاء العنصر من خلال جافاسكريبت:

.loader-container .loader {
  display: none;
}

والآن كود JavaScript:

وانتبه إلى ليتم عرض الـ loader حتى انتهاء المهمة، يجب أن تقوم المهمة بالتنفيذ بشكل غير متزامن (asynchronously)، حتى لا يتوقف تحميل الصفحة أثناء تنفيذ المهمة.

أي نستخدم Promise و async/await في الدالة التي تقوم بتنفيذ المهمة، وبالتالي ستتمكن من استخدام الـ loader لحين انتهاء المهمة.

// العناصر المستخدمة
const loaderBtn = document.getElementById('loaderBtn');
const loader = document.querySelector('.loader'); // استهداف العنصر الـ loader

// المهمة التي تحاكي العملية التي تستغرق وقتًا
function simulateTask() {
  return new Promise(resolve => {
    setTimeout(() => {
      // اكمل هنا ما ترغب بعمله في المهمة (مثال: تنفيذ طلب API أو عملية طويلة)
      resolve(); // اكمل هنا إذا كان هناك بيانات نريد إرجاعها بعد الانتهاء
    }, 3000); // هنا تحدد فترة التنفيذ بالميلي ثانية (3 ثواني مثال)
  });
}

// الدالة التي تنفذ عند النقر على الزر
async function startLoading() {
  console.log('www');
  loaderBtn.disabled = true; // تعطيل الزر أثناء التحميل
  loader.style.display = 'flex'; // إظهار الـ loader

  try {
    // قم بتنفيذ المهمة الغير متزامنة (asynchronously)
    await simulateTask();

    // تنفيذ هذا الجزء فقط عندما ينتهي التنفيذ بنجاح
    loader.style.display = 'none'; // إخفاء الـ loader بعد الانتهاء من التحميل
    loaderBtn.disabled = false; // تمكين الزر بعد الانتهاء من التحميل
  } catch (error) {
    // إدارة الأخطاء إن وجدت
    console.error('حدث خطأ أثناء التحميل:', error);
    loader.style.display = 'none'; // إخفاء الـ loader في حالة حدوث خطأ
    loaderBtn.disabled = false;
  }
}

// إضافة مستمع للنقر على الزر
loaderBtn.addEventListener('click', startLoading);