بارگذاری
spinnerکامپوننتحلقهی در حال چرخش که رنگ متن اطرافش را میگیره، در چهار اندازه، با متن کنارش یا به شکل لایهای روی کارت.
در حال بارگذاری
در حال بارگذاری
در حال بارگذاری
در حال بارگذاری
در حال دریافت…
سفارش ۱۴۰۵۲
۳ قلم، ارسال با پست پیشتاز
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add spinnerنصب دستی
محتوای تب «کد» را در
components/ui/spinner.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Spinner, LoadingOverlay } from "@/components/ui/spinner"23<Spinner label="در حال دریافت…" />4<Button disabled><Spinner size="xs" className="text-current" /> ثبت</Button>56<div className="relative">7 <LoadingOverlay loading={isPending} />8 …9</div>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | ۱۲ تا ۳۶ پیکسل. xs برای داخل دکمه. |
| label | ReactNode | - | متن کنار حلقه. بدون آن هم صفحهخوان «در حال بارگذاری» میشنوه. |
| LoadingOverlay | { loading; label? } | - | لایهی نیمهشفاف روی والدی که relative باشه. |