اسپینر (Spinner)

معرفی

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

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

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

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

import { Spinner } from '@partodata/ui'

<Spinner />

استفاده

import { Spinner } from '@partodata/ui'

<Spinner />

مثال‌ها

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

اندازه پیش‌فرض sm (۱۶px) است. برای تغییر اندازه از prop size استفاده کنید (xs=۱۲px، sm=۱۶px، md=۲۰px، lg=۲۴px، xl=۳۲px):

<div className="flex items-center gap-4">
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</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="در حال بارگذاری..." (فارسی) به‌طور پیش‌فرض تنظیم شده — نیازی به مقداردهی دستی برای پیام فارسی نیست
• تنها زمانی آن را بازنویسی کنید که بخواهید عملیات مشخصی را توصیف کنید: <Spinner aria-label="در حال ارسال فرم" />

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

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

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