اسپینر (Spinner)

معرفی

کامپوننت Spinner یک نشانگر لودینگ چرخشی است که برای نشان دادن عملیات در حال انجام استفاده می‌شود. به‌طور پیش‌فرض دارای role="status" و aria-label="Loading" برای دسترسی‌پذیری است.

چه زمانی استفاده نکنیم:

• برای بارگذاری اولیه صفحه یا لیست‌ها — از Skeleton استفاده کنید
• برای بارگذاری نمودارها — از prop isLoading در نمودار استفاده کنید
• برای حالت بارگذاری دکمه — از prop isLoading در Button استفاده کنید

استفاده

import { Spinner } from '@parto-system-design/ui'

<Spinner />

مثال‌ها

اندازه‌های مختلف

اندازه پیش‌فرض size-4 (16px) است. با className می‌توانید آن را تغییر دهید:

<div className="flex items-center gap-4">
  <Spinner className="size-3" />
  <Spinner />
  <Spinner className="size-6" />
  <Spinner className="size-8" />
</div>

در دکمه

<Button disabled>
  <Spinner className="me-2" />
  در حال بارگذاری...
</Button>

با متن

<div className="flex items-center gap-2 text-muted-foreground">
  <Spinner />
  <span>در حال دریافت اطلاعات...</span>
</div>

Props

دسترسی‌پذیری

• دارای role="status" برای اعلام وضعیت به screen reader
• aria-label="Loading" به‌طور پیش‌فرض تنظیم شده — می‌توانید با prop مربوطه تغییرش دهید
• در صورت نیاز به پیام فارسی: <Spinner aria-label="در حال بارگذاری" />

راهنمای استفاده

کامپوننت‌های مرتبط

• Skeleton — برای بارگذاری اولیه محتوا
• Button isLoading — برای نمایش بارگذاری روی دکمه
• الگوهای بارگذاری — راهنمای انتخاب الگوی مناسب