Spinner

کامپوننت Spinner برای نمایش حالت بارگذاری در حال انجام بودن یک عملیات استفاده می‌شود؛ مثل انتظار برای پاسخ سرور.

Import

import { Spinner } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<Spinner />

Playground

size

<Spinner size="md" />

Size

سه اندازه‌ی sm، md (پیش‌فرض) و lg در دسترس است — اندازه را متناسب با بافت استفاده انتخاب کن؛ مثلاً sm داخل دکمه‌ها و lg برای بارگذاری کل صفحه.

Accessibility

کامپوننت با role="status" و aria-label="در حال بارگذاری" پیاده شده، پس screen reader ها وضعیت را اعلام می‌کنند.
اگر کل بخشی از صفحه در حال بارگذاری است، بهتر است یک متن قابل‌مشاهده هم کنارش قرار بدهی.
برای زمینه‌ی خاص می‌توانی aria-label را دقیق‌تر کنی:

<Spinner size="sm" aria-label="در حال ارسال فرم" />

Data Attributes and Customize CSS

Spinner hookهای زیر را روی span ریشه قرار می‌دهد:

Attribute	کاربرد
`data-fara-spinner`	root اسپینر
`data-size`	اندازه‌ی فعلی: `sm`، `md` یا `lg`

<Spinner className="inline-spinner" size="sm" />

[data-fara-spinner][data-size="sm"] {
  color: #2563eb;
}

[data-fara-spinner].inline-spinner {
  margin-inline-start: 6px;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  [data-fara-spinner] {
    animation-duration: 1.5s;
  }
}

className روی root اعمال می‌شود و data-size برای قوانین عمومی وابسته به اندازه مناسب است.

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	اندازه‌ی اسپینر
`className`	`string`	-	کلاس CSS اضافی برای سفارشی‌سازی
`ref`	`Ref<HTMLSpanElement>`	-	دسترسی مستقیم به المان DOM

علاوه بر موارد بالا، تمام ویژگی‌های استاندارد <span> نیز پشتیبانی می‌شوند.

Import​

Basic Usage​

Playground​

Size​

Accessibility​

Data Attributes and Customize CSS​

Props​