افکت بارگذاری با نوار دایره ای CSS

نوارهای پیشرفت دایره‌ای (circular progress / circular loader) از محبوب‌ترین المان‌های رابط کاربری هستند. آن‌ها اطلاعاتی دربارهٔ وضعیت بارگذاری یا پردازش نمایش می‌دهند و ظاهری مدرن به اپلیکیشن یا وب‌سایت اضافه می‌کنند. در این مقاله به روش‌های ساخت افکت بارگذاری دایره‌ای با CSS و SVG، نکات عملکردی، دسترس‌پذیری و مثال‌های قابل استفاده خواهیم پرداخت.

چرا از نوار دایره‌ای استفاده کنیم؟

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

روش اول — CSS خالص با conic-gradient (قابل استفاده برای determinate)

یکی از ساده‌ترین و مدرن‌ترین روش‌ها استفاده از conic-gradient به کمک متغیرهای CSS است؛ مناسب برای نمایش درصد مشخص (مثلاً 65%). این روش فقط با CSS و یک عنصر HTML انجام می‌شود.

<div class="progress-circle" style="--value:65;--size:120px;--thickness:12px">
  <span class="progress-text">65%</span>
</div>

/* CSS */.progress-circle{
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  --deg: calc(var(--value) * 3.6deg);
  background:
    conic-gradient(var(--accent, #4caf50) var(--deg), #e6e6e6 0deg);
  position: relative;
  box-shadow: inset 0 0 0 var(--thickness) #fff;
}
.progress-text{
  font-weight: 600;
}

توضیح فارسی:

در این مثال از متغیر CSS –value برای تعیین درصد استفاده شده است. conic-gradient یک گرادیانت زاویه‌ای ایجاد می‌کند که تا زاویه معادل درصد، رنگ پر شده (accent) را نشان می‌دهد و از آن به بعد رنگ پس‌زمینهٔ خنثی قرار می‌گیرد. با استفاده از box-shadow یا یک لایهٔ داخلی می‌توان ظاهر حلقه‌ای (thickness) را شبیه‌سازی کرد. این راه بسیار ساده و کاراست و برای مقادیر ثابت یا تعیین شده توسط JS مناسب است.

بهبود: اضافه کردن انیمیشن و حالت indeterminate

.progress-circle.indeterminate{
  animation: spin 1.4s linear infinite;
  background:
    conic-gradient(from 0deg, var(--accent, #4caf50) 0 25%, transparent 25% 100%);
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}

توضیح فارسی:

برای حالت indeterminate (وقتی درصد مشخص نیست) با تغییر گرادیانت به بخشی رنگی و چرخش کل عنصر، افکت بارگذاری نامتناهی ایجاد می‌کنیم. این روش به‌صرفه و روان است، اما توجه کنید که در برخی مرورگرهای قدیمی conic-gradient پشتیبانی نشده است.

روش دوم — SVG و stroke-dasharray (دقت و انیمیشن نرم)

برای نمایش دقیق‌تر درصد و انیمیشن‌های نرم، SVG انتخاب حرفه‌ای‌تری است. با دو دایره هم‌مرکز و تنظیم stroke-dasharray و stroke-dashoffset می‌توان مقدار پیشرفت را کنترل کرد.

<svg class="svg-progress" width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="52" stroke="#e6e6e6" stroke-width="16" fill="none"/>
  <circle class="bar" cx="60" cy="60" r="52" stroke="#4caf50" stroke-width="16" fill="none"
    stroke-linecap="round" transform="rotate(-90 60 60)"/>
</svg>

/* CSS */.svg-progress .bar{
  stroke-dasharray: 326.7256; /* 2πr */  stroke-dashoffset: calc(326.7256 - 326.7256 * var(--value, 0) / 100);
  transition: stroke-dashoffset 0.6s ease;
}

توضیح فارسی:

در این نمونه r=52 است، بنابراین محیط دایره 2πr محاسبه شده است (در کد بالا عدد محاسبه‌شده قرار گرفته). با تنظیم stroke-dashoffset بر اساس درصد، بخش رنگی دایره کم یا زیاد می‌شود. transform rotate(-90) برای شروع از بالا استفاده شده است. SVG دقت و کنترل بیشتری روی خطوط، شکست نور و capها می‌دهد و برای نمودارهای دقیق مناسب است.

اتصال به JavaScript (به‌روزرسانی مقدار)

// JS example to update value
const svgBar = document.querySelector('.svg-progress .bar');
function setValue(v){
  svgBar.style.setProperty('--value', v);
}
setValue(75); // updates to 75%

توضیح فارسی:

با استفاده از جاوااسکریپت می‌توان مقدار متغیر –value را تغییر داد و به‌صورت دینامیک مقدار پیشرفت را به‌روزرسانی کرد. این روش برای عملیات‌های واقعی مانند آپلود فایل یا پردازش طولانی بسیار کاربردی است.

نکات دسترس‌پذیری و UX

• برای بارگذاری determinate همیشه مقدار عددی (مثلاً aria-valuenow) را در المان ARIA یا متن داخل نشان دهید تا کاربران صفحه‌خوان هم متوجه شوند.
• در حالت indeterminate از متن توضیحی استفاده کنید: “در حال بارگذاری…” تا مفهوم برای همه واضح باشد.
• رنگ‌ها را با کنتراست مناسب انتخاب کنید تا کاربران کم‌بینا هم بتوانند تشخیص دهند.

عملکرد و سازگاری مرورگر

conic-gradient در مرورگرهای مدرن پشتیبانی خوبی دارد، اما ممکن است در نسخه‌های قدیمی‌تر دسکتاپ و موبایل مشکلاتی وجود داشته باشد. SVG تقریباً در تمام مرورگرها پایدار است و برای پروژه‌های حساس به سازگاری توصیه می‌شود.

بهینه‌سازی و توصیه‌های حرفه‌ای

• برای انیمیشن‌های پیوسته از transform و opacity استفاده کنید تا رندر GPU فعال شود و جابجایی روان‌تر باشد.
• اگر بارگذاری طولانی است، حالت indeterminate را با متن همراه کنید تا کاربر نداند آیا شمارش معکوس یا متوقف شده است.
• در صفحات با چند loader هم‌زمان، انیمیشن‌ها را تا حد ممکن سبک نگه دارید تا بار پردازشی صفحه کم نشود.

نمونهٔ کاربردها

• نمایش درصد آپلود فایل در فرم‌ها.
• نمایش مشخصات زمان‌بندی تسک‌های پس‌زمینه.
• استفاده در داشبوردها به عنوان ویجت خلاصهٔ وضعیت.

خلاصه و جمع‌بندی

ساخت نوار دایره‌ای با CSS یا SVG بسیار انعطاف‌پذیر است. برای کارهای ساده و نیاز به کمترین کد، conic-gradient گزینهٔ مناسبی است. برای نیاز به دقت، انیمیشن نرم و سازگاری گسترده، SVG توصیه می‌شود. همیشه به دسترس‌پذیری، عملکرد و تجربهٔ کاربری توجه کنید تا افکت نه تنها زیبا بلکه مفید نیز باشد.

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

ارسال