طراحی Progress Circle با CSS

Progress Circle یا نوار پیشرفت دایره‌ای یکی از عناصر بصری محبوب در طراحی رابط کاربری است. این نوع نشانگر وضعیت برای نمایش درصد تکمیل عملیات، بارگذاری فایل، زمان‌بندی و آمار کوچک بسیار مناسب است. در این مقاله به چند روش عملی و بهینه برای ساخت Progress Circle با CSS (و در صورت نیاز با پشتیبانی ساده JavaScript یا SVG) می‌پردازیم و نکات دسترس‌پذیری، عملکرد و واکنش‌گرایی را نیز پوشش می‌دهیم.

روش‌ها و انتخاب‌ها

به‌طور کلی برای طراحی Progress Circle می‌توان از این روش‌ها استفاده کرد:

• CSS-only با استفاده از conic-gradient
• دو نیمه با چرخش و ماسک (classic CSS halves)
• SVG با stroke-dasharray و stroke-dashoffset

مثال 1 — ساده و مدرن با conic-gradient

/* HTML */<div class="progress-circle" role="progressbar"><span class="progress-text">65%</span></div>
/* CSS */ .progress-circle{ --size: 120px; --thickness: 12px; --value: 65; /* percentage */ --bg: #eee; --accent: #4caf50; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--value) * 1%), transparent 0), radial-gradient(circle at center, white calc(100% - var(--thickness)), transparent 0); font-family: Arial, sans-serif; }

توضیح: این نمونه از conic-gradient استفاده می‌کند تا بخشی از دایره را با رنگ پر کند. متغیرهای CSS (CSS variables) برای اندازه، ضخامت و مقدار درصد تعریف شده‌اند تا به‌راحتی قابل تغییر باشند. عنصر داخلی متن درصد را نمایش می‌دهد و از صفت‌های ARIA برای دسترس‌پذیری استفاده شده است.

نکته بهینه‌سازی

برای سازگاری بهتر می‌توانید با JavaScript مقدار --value را به‌صورت پویا تغییر دهید یا انیمیشن‌های CSS با transition اضافه کنید.

مثال 2 — SVG با stroke-dasharray (کنترل دقیق)

/* JS */const fg = document.querySelector('.fg');
const radius = 52;
const circumference = 2 * Math.PI * radius;
fg.style.strokeDasharray = `${circumference} ${circumference}`;
function setProgress(percent){
  const offset = circumference - percent / 100 * circumference;
  fg.style.strokeDashoffset = offset;
}
setProgress(40);

توضیح: در این مثال از SVG برای رسم حلقه استفاده شده است. مقدار stroke-dasharray برابر با محیط دایره تنظیم می‌شود و با تغییر stroke-dashoffset می‌توان درصد را نمایش داد. تبدیل چرخشی به اندازه -90 درجه باعث می‌شود نقطه شروع از بالا باشد. این روش برای نمایش دقیق و شخصی‌سازی stroke مناسب است.

دسترسی (Accessibility) و سازگاری

برای دسترس‌پذیری باید نقش و مقدار پیشرفت را با ARIA اعلام کنید. برای مثال:

<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">...</div>

توضیح: صفات ARIA به صفحه‌خوان‌ها اجازه می‌دهند میزان پیشرفت را گزارش کنند. همچنین متن داخل دایره (مثلاً “65%”) برای کاربران بصری لازم است. در صورت استفاده از SVG می‌توان از aria-label یا تگ <title> داخل SVG بهره برد.

انیمیشن و انتقال

برای داشتن انیمیشن روان از transition یا @keyframes استفاده کنید. در مثال CSS-only می‌توان این‌گونه افزود:

.progress-circle{
  transition: background 0.6s cubic-bezier(.4, .0, .2, 1);
}

توضیح: تغییر متغیر --value با JavaScript باعث می‌شود background با گرادیان مخروطی به‌صورت نرم منتقل شود. برای SVG می‌توان transition: stroke-dashoffset 0.6s روی دایره جلو تعریف کرد.

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

• برای عملیات کوتاه (loading، upload) از انیمیشن‌های کوتاه و بازخورد فوری استفاده کنید.
• در نمودارهای پیچیده یا چند حلقه‌ای، SVG انتخاب بهتر است چون کنترل بیشتری روی stroke، چندین مسیر و لایه‌ها می‌دهد.
• برای تعداد زیادی progress circles در یک صفحه، از ترکیب CSS-only و پرفورمنس محور استفاده کنید تا repaint/recacl را کاهش دهید.
• در موبایل، اندازه و تاچ‌بری قابل دسترس را فراموش نکنید؛ اگر حلقه بر تعامل کاربر اثر دارد، فضای مناسبی برای لمس بگذارید.

نمونه JS برای به‌روزرسانی مقدار (conic-gradient)

const el = document.querySelector('.progress-circle');
function updatePercent(p){
  p = Math.max(0, Math.min(100, p));
  el.style.setProperty('--value', p);
  el.setAttribute('aria-valuenow', p);
  el.querySelector('.progress-text').textContent = p + '%';
}
updatePercent(82);

توضیح: این اسکریپت مقدار درصد را به‌صورت امن بین 0 تا 100 قرار می‌دهد، متغیر CSS را به‌روزرسانی می‌کند، صفت ARIA را تنظیم می‌کند و متن داخل دایره را تغییر می‌دهد.

عیب‌یابی و نکات سازگاری

• conic-gradient در مرورگرهای خیلی قدیمی پشتیبانی نمی‌شود — برای آن‌ها می‌توانید از SVG یا روش دو نیمه استفاده کنید.
• اگر در انیمیشن با پرش روبه‌رو شدید، از will-change: transform یا transform: translateZ(0) برای بهبود عملکرد استفاده کنید، اما این موارد را محتاطانه به کار ببرید.
• در صورت نمایش کند در دستگاه‌های ضعیف، از کاهش انیمیشن یا حذف افکت‌های سنگین استفاده کنید.

نتیجه‌گیری

طراحی Progress Circle با CSS می‌تواند ساده یا بسیار پیچیده باشد، بسته به نیاز پروژه. برای رابط‌های ساده و سریع، استفاده از conic-gradient با CSS variables گزینه‌ای عالی است؛ برای کنترل دقیق‌تر و نمودارهای پیچیده‌تر، SVG بهترین انتخاب است. همیشه دسترس‌پذیری، عملکرد و واکنش‌پذیری را در مرکز توجه قرار دهید تا تجربه کاربری مطلوب شکل گیرد.

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

ارسال