طراحی نوار پیشرفت با CSS — مقدمه‌ای کاربردی

نوار پیشرفت (progress bar) یکی از المان‌های رایج در رابط کاربری است که کاربران را از وضعیت یک فرایند مطلع می‌کند. در این مقاله به صورت جامع و عملیاتی روش‌های طراحی نوار پیشرفت با CSS را بررسی می‌کنیم: از نمونهٔ ساده تا انواع تعیین‌شده (determinate)، نامشخص (indeterminate)، انیمیشنی، دایره‌ای و نکات دسترسی (accessibility) و بهینه‌سازی.

مفاهیم پایه

• Determinate: زمانی که مقدار پیشرفت مشخص است (مثلاً 70%).
• Indeterminate: زمانی که مقدار مشخص نیست، مثلاً هنگام انتظار برای پاسخ سرور.
• Accessibility: استفاده از role و aria-* برای کمک به کاربران با کمبود توانایی‌های بینایی.

مثال پایه: نوار خطی ساده

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

/* CSS */.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;
}

این کد یک نوار پایهٔ خطی ایجاد می‌کند. عنصر بیرونی (.progress) نمای زمینه و عنصر داخلی (.progress__bar) نمای مقدار را نشان می‌دهد. با تغییر مقدار inline style width، مقدار پیشرفت تغییر کرده و به‌صورت انیمیشنی حرکت می‌کند.

افزایش قابلیت دسترسی و semantics

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

اضافه کردن role=”progressbar” و صفت‌های aria کمک می‌کند تا صفحه‌خوان‌ها مقدار پیشرفت را تشخیص دهند. aria-valuetext می‌تواند متن سفارشی مثل «بارگذاری ۶۰٪» را منتقل کند.

نوار پیشرفت نامشخص (Indeterminate)

برای حالت‌هایی که مقدار مشخص نیست، از انیمیشن تکرارشونده استفاده می‌شود تا کاربر بداند فرایند در جریان است.

.indeterminate {
  position: relative;
  height: 12px;
  background: #f1f1f1;
  overflow: hidden;
}
.indeterminate::before {
  content: "";
  position: absolute;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #4caf50, transparent);
  animation: indeterminate 1s infinite;
}
@keyframes indeterminate {
  0% { left: -40%; }
  100% { left: 100%; }
}

در این پیاده‌سازی از یک ::before متحرک استفاده شده تا یک نوار موجی از چپ به راست حرکت کند و حالت بارگیری نامشخص را القا کند. این الگو رایج در برنامه‌های وب است.

نوار پیشرفت دایره‌ای با CSS (conic-gradient)

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#4caf50 0deg, #4caf50 calc(var(--p) * 1deg), #eee calc(var(--p) * 1deg));
  display: grid;
  place-items: center;
  font-weight: 600;
}

در این مثال از CSS conic-gradient و یک متغیر CSS به نام --p (که زاویه را نشان می‌دهد) استفاده شده است. برای نمایش 75% باید --p: calc(360 * 0.75) تنظیم شود. این روش سبک و نیاز به SVG را کاهش می‌دهد.

مثال کامل دایره‌ای با متن در وسط

<div class="circle" style="--p:270deg">75%</div>

با تنظیم متغیر --p به زاویهٔ مناسب، دایره درصد دلخواه را نمایش می‌دهد. این روش ساده و قابل سفارشی‌سازی است؛ برای پشتیبانی از مرورگرهای قدیمی می‌توان از SVG استفاده کرد.

نمونهٔ بهتر: کامپوننت قابل استفاده دوباره

<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
  <div class="progress__track">
    <div class="progress__fill" style="width:40%"></div>
  </div>
  <span class="progress__label">40%</span>
</div>

/* CSS: از متغیرها و prefers-reduced-motion استفاده شود */.progress__fill {
  height: 12px;
  background: linear-gradient(90deg,#1976d2,#64b5f6);
  transition: width 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .progress__fill { transition: none; }
}

در این نسخه، از یک label برای نمایش درصد استفاده شده و همچنین از مدیا کوئری prefers-reduced-motion برای احترام به کاربران حساس به حرکت بهره گرفته‌ایم.

عملکرد، بهینه‌سازی و بهترین شیوه‌ها

• از transitions سبک و مدت زمان کوتاه استفاده کنید تا بار پردازشی پایین بماند.
• برای انیمیشن‌های طولانی، از transform و opacity استفاده کنید چون به GPU منتقل می‌شوند و روان‌تر اجرا می‌شوند.
• برای داده‌های واقعی، تغییر عرض را از طریق JavaScript و با debounce کردن به‌روزرسانی‌ها بهینه کنید.
• موقعیت و رنگ‌ها را با متغیرهای CSS مدیریت کنید تا قابلیت سفارشی‌سازی آسان شود.

نمونه مقایسه‌ای: انواع نوار پیشرفت

نکات تخصصی و مشکلات رایج

• استفاده از رنگ‌های کم‌کنتراست می‌تواند برای کاربران با اختلال بینایی مشکل‌زا باشد؛ همیشه کنتراست کافی بررسی شود.
• در موبایل، پهنای زیاد و ارتفاع کم ممکن است کلیک‌پذیری یا خوانایی را کاهش دهد؛ اندازه را متناسب نگه دارید.
• برای بارگذاری طولانی، ترکیب نوار پیشرفت با پیام متنی و درصد تقریبی تجربه کاربری را بهتر می‌کند.

جمع‌بندی و پیشنهادهای عملی

طراحی نوار پیشرفت با CSS می‌تواند ساده یا پیچیده باشد؛ کلید موفقیت انتخاب نوع مناسب (determinate یا indeterminate)، رعایت دسترسی و استفاده از انیمیشن‌های بهینه است. با ترکیب CSS variables، media queries و ARIA می‌توانید کامپوننت‌های قابل استفادهٔ مجدد، سبک و در عین حال قابل دسترس تولید کنید.

در صورت نیاز می‌توانم نمونهٔ آمادهٔ JavaScript برای مدیریت مقدار و انیمیشن‌های پیچیده‌تر (debounce و easing سفارشی) هم اضافه کنم.

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

ارسال