طراحی نوار بارگذاری خطی با CSS

نوار بارگذاری خطی (Linear Progress Bar) یکی از اجزای رابط کاربری است که بازخورد بصری برای فرآیندهای زمان‌بر فراهم می‌کند. در این مقاله به صورت گام‌به‌گام روش‌های طراحی انواع نوارهای پیشرفت خطی با CSS (و در صورت نیاز JavaScript اندکی) را بررسی می‌کنیم، شامل حالت‌های determinate و indeterminate، انیمیشن، شخصی‌سازی با متغیرهای CSS و نکات دسترسی (accessibility).

چرا نوار پیشرفت خطی مهم است؟

نوارهای پیشرفت به کاربران اطلاع می‌دهند که فرآیندی در حال انجام است و حدود زمانی یا وضعیت آن را نمایش می‌دهند. طراحی مناسب باعث افزایش رضایت کاربر و کاهش سردرگمی می‌شود.

ساختار پایه — مثال determinate ساده

<div class="progress">
  <div class="progress__bar" style="width: 60%"></div>
</div>

این کد HTML ساده یک ظرف نوار پیشرفت و عنصر داخلی با عرض معین را می‌سازد. عرض بر اساس درصد نشان‌دهنده میزان تکمیل است.

.progress{
  width: 100%;
  height: 12px;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
}

.progress__bar{
  height: 100%;
  background: linear-gradient(90deg,#4caf50,#81c784);
  width: 0%;
  transition: width 400ms ease;
}

در CSS بالا ظرف با شعاع گوشه و رنگ پس‌زمینه تعریف شده و بار اصلی با گرادیانت و انتقال نرم گسترده می‌شود. انتقال (transition) باعث می‌شود وقتی عرض تغییر می‌کند، انیمیشن نرم داشته باشیم.

حالت indeterminate (نامشخص) با انیمیشن

وقتی نمی‌دانیم مدت زمان عملیات چقدر است، از حالت indeterminate استفاده می‌کنیم. در این حالت یک نوار متحرک پیوسته نمایش داده می‌شود.

.progress--indeterminate{
  position: relative;
  overflow: hidden;
}

.progress--indeterminate::before{
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
  animation: indeterminate 1.2s infinite linear;
}

@keyframes indeterminate{
  0% { left: -40%; }
  100% { left: 100%; }
}

این تکنیک یک شبه‌عنصر (pseudo-element) متحرک اضافه می‌کند که از چپ به راست حرکت می‌کند و حس پیشرفت پیوسته را القا می‌کند. برای بارهای indeterminate معمولاً از عرض ثابت ظرف و انیمیشن پیوسته استفاده می‌کنیم.

نمای راه‌راه (Striped) و انیمیشن حرکت راه‌راه

.progress__bar--striped{
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.15) 0 10px,
    rgba(0,0,0,0.05) 10px 20px
  );
  animation: stripe 1s linear infinite;
}

@keyframes stripe{
  0%{ background-position: 0 0; }
  100%{ background-position: 40px 0; }
}

استفاده از repeating-linear-gradient و تغییر background-position یک افکت راه‌راه متحرک ایجاد می‌کند که می‌تواند با نوار determinate یا indeterminate ترکیب شود.

دسترس‌پذیری (Accessibility) و ARIA

برای اینکه نوار پیشرفت به درستی توسط صفحه‌خوان‌ها خوانده شود، از صفات ARIA استفاده کنید. در حالت determinate باید مقدار min، max و now مشخص باشد.

<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" aria-label="بارگذاری فایل" class="progress">
  <div class="progress__bar" style="width:60%"></div>
</div>

با افزودن role=”progressbar” و aria-valuenow مقدار فعلی برای تکنولوژی‌های کمکی قابل‌دسترسی می‌شود. در حالت indeterminate می‌توان aria-valuenow را حذف یا به aria-valuetext یک متن توصیفی داد.

کنترل با JavaScript — نمونه به‌روز‌رسانی دینامیک

const progressBar = document.querySelector('.progress__bar');

function setProgress(percent){
  const clamped = Math.max(0, Math.min(100, percent));
  progressBar.style.width = clamped + '%';
  progressBar.parentElement.setAttribute('aria-valuenow', clamped);
}

// مثال: شبیه‌سازی بارگذاری
let val = 0;
const interval = setInterval(()=>{
  val += Math.random()*10;
  setProgress(val);
  if(val >= 100) clearInterval(interval);
}, 400);

این اسکریپت یک تابع setProgress فراهم می‌کند که مقدار را به بازه 0–100 محدود کرده، عرض استایل را تغییر می‌دهد و مقدار aria را آپدیت می‌کند. نمونه‌ی شبیه‌سازی نشان می‌دهد چگونه می‌توان پیشرفت را پویا افزایش داد.

شخصی‌سازی با CSS Variables و پاسخ‌گویی (Responsive)

:root{
  --progress-height: 10px;
  --progress-bg: #f3f3f3;
  --progress-accent: linear-gradient(90deg,#2196f3,#21cbf3);
}

.progress{
  height: var(--progress-height);
  background: var(--progress-bg);
}

.progress__bar{
  background: var(--progress-accent);
}

متغیرهای CSS کار مدیریت تم و تغییر سریع اندازه‌ها یا رنگ‌ها را ساده می‌کنند. با media queryها می‌توان ارتفاع یا padding را برای نمایش موبایل تنظیم کرد.

مثال ترکیبی نهایی (HTML + CSS مختصر)

<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45">
  <div class="progress__bar progress__bar--striped" style="width:45%"></div>
</div>

این نمونه یک نوار پیشرفت تعیین‌شده با راه‌راه متحرک است. می‌توانید با تغییر aria-valuenow و style.width مقدار را آپدیت کنید.

بهترین شیوه‌ها و نکات حرفه‌ای

• برای عملیات‌های کوتاه (<2s) معمولاً نیازی به نوار نیست؛ از یک انیمیشن کوتاه یا بار لود استفاده کنید.
• در حالتی که زمان دقیق مشخص نیست، از indeterminate استفاده کنید تا کاربر متوجه کاری در جریان است.
• همیشه ARIA را اضافه کنید تا برای کاربران صفحه‌خوان قابل‌فهم باشد.
• از transition به‌جای animationهای سنگین برای تغییر عرض استفاده کنید تا مصرف CPU کاهش یابد.
• در پروژه‌های پیچیده، آپدیت DOM را از طریق requestAnimationFrame انجام دهید تا هموارتر باشد.

مقایسه روش‌ها

موارد کاربرد واقعی

• نمایش وضعیت آپلود/دانلود فایل
• فرآیندهای طولانیِ پردازشی (پردازش تصویر، تبدیل فرمت)
• مراحل نصب یا به‌روزرسانی
• نمایش پیشرفت بارگذاری صفحات یا بخش‌های SPA

خلاصه و نتیجه‌گیری

طراحی نوار بارگذاری خطی با CSS هم ساده و هم قابل‌گسترش است. با ترکیب CSS مدرن (متغیرها، گرادیانت‌ها، animation/transition) و کمی JavaScript برای بروزرسانی مقادیر و رعایت دسترسی، می‌توانید نوارهای زیبا، سبک و قابل‌اعتماد بسازید. همیشه تجربه کاربری و دسترسی را در اولویت قرار دهید و از روش مناسب (determinate یا indeterminate) بسته به نوع فرایند استفاده کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال