سورس کد نوار پیشرفت ساده با جاوااسکریپت (تمرین قدم‌به‌قدم برای مبتدی‌ها)

ساخت یک نوار پیشرفت ساده یکی از بهترین تمرین‌های شروع جاوااسکریپت است؛ چون در یک پروژهٔ کوچک با متغیر، تابع، رویداد کلیک، شرط و تایمر کار می‌کنید و نتیجه را همان لحظه روی صفحه می‌بینید. در این مطلب از طاووس وب این نوار را قدم‌به‌قدم می‌سازیم و هر خط کد را توضیح می‌دهیم. پیش‌نمایش نسخهٔ اولیه هم در دسترس است.

دموی زنده نوار پیشرفت

قدم ۱: ساختار HTML نوار پیشرفت

یک ظرف (track) و یک نوار داخلی (fill) کافی است. ویژگی‌های aria وضعیت نوار را به صفحه‌خوان اعلام می‌کنند:

<div class="progress">
  <div class="progress-head">
    <span>پیشرفت</span>
    <span class="progress-value">0%</span>
  </div>
  <div class="progress-track" role="progressbar"
       aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
    <div class="progress-fill"></div>
  </div>
  <button type="button" id="minus">-10%</button>
  <button type="button" id="plus">+10%</button>
  <button type="button" id="auto">پر شدن خودکار</button>
</div>

قدم ۲: ظاهر نوار با CSS

عرض اولیهٔ نوار صفر است و transition باعث می‌شود هر تغییر عرض نرم انجام شود:

.progress-track {
  height: 22px;
  background: #EDE4FA;
  border-radius: 30px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8224E3, #5F01AF);
  border-radius: 30px;
  transition: width .35s ease;
}
.progress-fill.done {
  background: #1FAE57; /* در ۱۰۰٪ سبز می‌شود */
}

چون سایت فارسی و راست‌به‌چپ است، نوار به‌طور خودکار از سمت راست پر می‌شود. اگر می‌خواهید از چپ پر شود، به track ویژگی direction: ltr بدهید.

قدم ۳ و ۴: منطق جاوااسکریپت

قلب برنامه یک متغیر و یک تابع است. هر دکمه فقط مقدار متغیر را تغییر می‌دهد و بعد render را صدا می‌زند:

const fill  = document.querySelector('.progress-fill');
const label = document.querySelector('.progress-value');
const track = document.querySelector('.progress-track');

let percent = 0;     // وضعیت فعلی نوار
let timer = null;    // شناسهٔ تایمر خودکار

function render() {
  // محدود کردن مقدار بین ۰ و ۱۰۰
  percent = Math.max(0, Math.min(100, percent));

  fill.style.width = percent + '%';
  label.textContent = percent + '%';
  track.setAttribute('aria-valuenow', percent);
  fill.classList.toggle('done', percent === 100);

  if (percent === 100 && timer) {
    clearInterval(timer);
    timer = null;
  }
}

document.getElementById('plus').onclick  = () => { percent += 10; render(); };
document.getElementById('minus').onclick = () => { percent -= 10; render(); };

document.getElementById('auto').onclick = () => {
  if (timer) return;            // جلوگیری از اجرای چند تایمر همزمان
  timer = setInterval(() => {
    percent += 2;
    render();
  }, 80);
};

توضیح خط‌به‌خط برای مبتدی‌ها

1. let به‌جای constمقدار percent و timer در طول برنامه تغییر می‌کند، پس باید با let تعریف شوند. عناصر صفحه تغییر نمی‌کنند و با const نگه داشته می‌شوند.
2. Math.min و Math.maxاین دو تابع مقدار را «گیره» می‌کنند تا با کلیک‌های پشت سر هم از ۱۰۰ بیشتر یا از صفر کمتر نشود.
3. یک منبع حقیقتبه‌جای اینکه هر دکمه مستقیم عرض نوار را تغییر دهد، همه فقط متغیر را عوض می‌کنند. این الگو پایهٔ فریم‌ورک‌هایی مثل React و Vue است.
4. setInterval و clearIntervalتایمر هر ۸۰ میلی‌ثانیه ۲ درصد اضافه می‌کند و وقتی به ۱۰۰ رسید، با clearInterval خاموش می‌شود. شرط if (timer) return از ساخته شدن چند تایمر همزمان جلوگیری می‌کند.

جایگزین آماده: تگ progress در HTML

HTML یک تگ آماده هم برای این کار دارد: <progress value="40" max="100">. این تگ به‌طور خودکار برای صفحه‌خوان‌ها قابل فهم است، اما ظاهرش در هر مرورگر متفاوت است و استایل‌دهی آن به پیشوندهای ::-webkit-progress-value و ::-moz-progress-bar نیاز دارد. برای طراحی دقیق و یکسان، روش div که در این آموزش ساختیم انعطاف بیشتری دارد.

تمرین برای شما

• دکمه‌ای اضافه کنید که تایمر خودکار را متوقف (Pause) کند.
• کاری کنید که رنگ نوار زیر ۳۰٪ قرمز، بین ۳۰ تا ۷۰ نارنجی و بالای ۷۰ بنفش باشد.
• درصد را در localStorage ذخیره کنید تا با رفرش صفحه از بین نرود.

بعد از این تمرین، سورس کد نوار پیشرفت گروهی را ببینید که چند نوار را هنگام اسکرول پر می‌کند. برای چیدمان بهتر اجزای صفحه هم آموزش Flexbox را پیشنهاد می‌کنیم.