ساخت Loader دایره‌ای با CSS

در رابط‌های کاربری مدرن، بارگذاری (loading) یکی از بخش‌های مهم تجربه کاربری است. Loader دایره‌ای که اغلب به شکل یک چرخان یا حلقه متحرک نمایش داده می‌شود، هم بصری شفافیت را افزایش می‌دهد و هم کمک می‌کند تا کاربر بداند عملی در حال انجام است. در این مقاله به روش‌های ساخت انواع Loader دایره‌ای با CSS، نکات دسترسی، بهینه‌سازی عملکرد و نمونه‌های عملی می‌پردازیم.

مزایا و موارد استفاده

• نمایش وضعیت بارگذاری داده‌ها (API، فایل‌ها)
• استفاده در دکمه‌ها یا فرم‌ها هنگام ارسال
• جایگزین مناسب به جای متن “در حال بارگذاری…”
• قابلیت شخصی‌سازی آسان با CSS

روش پایه: Spinner ساده با border

.spinner {
  width: 48px;
  height: 48px;
  border: 6px solid rgba(0,0,0,0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

این کد یک دایره با ضخامت مرزی مشخص می‌سازد و تنها بخش بالایی را رنگی می‌کند تا هنگام چرخش، حرکت قابل مشاهده باشد. استفاده از border-radius: 50% و انیمیشن transform باعث می‌شود GPU رندر را سریع‌تر انجام دهد.

توضیح کاربردی

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

بهبودها: استفاده از conic-gradient برای حلقه ظریف

.ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0deg, #3498db 90deg, rgba(0,0,0,0.08) 90deg);
  animation: spin 1s linear infinite;
}

این روش با conic-gradient یک بخش رنگی روی دایره ایجاد می‌کند و دیگر نیازی به خطوط مرزی نداریم. مزیت: ظاهری مدرن‌تر و امکان تولید حلقه‌هایی با گرادیان پیچیده.

بهینه‌سازی و اصلاح

.ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #3498db 0deg 25%, rgba(0,0,0,0.08) 25% 100%);
  animation: spin 0.8s linear infinite;
  will-change: transform;
  transform-origin: 50% 50%;
}

اضافه کردن will-change: transform به مرورگر اعلام می‌کند که انیمیشن در آینده رخ می‌دهد و می‌تواند به بهبود روانی انیمیشن کمک کند. همچنین تنظیم transform-origin و زمان‌بندی مناسب تجربه کاربری بهتر ایجاد می‌کند.

چند حلقه با لایه‌های داخلی

.dual {
  width: 64px;
  height: 64px;
  position: relative;
}
.dual::before,
.dual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.dual::before {
  border: 6px solid rgba(0,0,0,0.08);
  border-top-color: #e74c3c;
  animation: spin 1.2s linear infinite;
}
.dual::after {
  width: 40px;
  height: 40px;
  top: 12px;
  left: 12px;
  border: 4px solid rgba(0,0,0,0.06);
  border-right-color: #f1c40f;
  animation: spin 0.9s linear reverse infinite;
}

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

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

• برای کاربران صفحه‌خوان از role="status" یا aria-live="polite" استفاده کنید.
• افرادی که حرکت را ترجیح نمی‌دهند، باید انیمیشن خاموش شود (پرونده بعدی).
• بارگذاری طولانی باید پیام متنی جایگزین داشته باشد، مثلاً “در حال بارگذاری اطلاعات…”

حمایت از prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .ring,
  .dual { animation: none; }
  /* می‌توانیم انیمیشن را با یک وضعیت ثابت یا تغییر شفافیت جایگزین کنیم */  .spinner { opacity: 0.6; }
}

این کد از تنظیمات سیستم کاربر تبعیت می‌کند و برای کسانی که حساس به حرکت هستند تجربه‌ای آرام‌تر فراهم می‌آورد.

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

• از transform (rotate) به جای تغییرات layout یا top/left استفاده کنید تا از GPU استفاده شود.
• به جای چند عنصر DOM برای یک loader ساده، از گرادیان‌ها یا pseudo-elementها استفاده کنید تا DOM سبک بماند.
• برای بارگذاری‌های کوتاه (<1s) بهتر است از افکت‌های کوتاه و ساده استفاده شود تا حوصله کاربر سر نرود.
• در صفحات با رندر سنگین، استفاده از will-change را محدود کنید تا حافظه اضافی مصرف نشود.

جدول مختصر: ویژگی‌های کلیدی

نمونه کاربرد واقعی و نکات مهندسی

در یک SPA که چندین کامپوننت ممکن است همزمان بارگذاری شوند، استفاده از یک Loader کلی (global) به همراه Loaderهای محلی داخل کامپوننت‌ها توصیه می‌شود. برای جلوگیری از چشمک‌زدن مکرر، معمولاً Loader را با تأخیر کوتاه (مثلاً 200ms) نمایش می‌دهند تا عملیات خیلی سریع باعث چشمک نشود.

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

ساخت Loader دایره‌ای با CSS هم ساده و هم قابل توسعه است. از روش پایه با border تا روش‌های پیشرفته با conic-gradient و pseudo-elements می‌توان به نتایج زیبا و بهینه‌ای رسید. فراموش نکنید دسترسی و عملکرد را در اولویت قرار دهید و با استفاده از prefers-reduced-motion و مدیریت صحیح DOM تجربه کاربری مناسبی فراهم کنید.

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

ارسال