Spinner

จาก shadcn

ไอคอนหมุนบอกสถานะกำลังโหลด มี role status ให้ screen reader รับรู้ได้ ปรับขนาดตามบริบทได้ด้วย className

กำลังบันทึกคำขอลา… กำลังตรวจสอบยอดคงเหลือ

ติดตั้ง

Terminal

pnpm dlx shadcn@latest add @whereui/spinner

ต้องผูก registry และติดตั้ง @whereui/theme นำหน้าเสมอเมื่อติดตั้งครั้งแรก

การใช้งาน

import { Spinner } from "@/components/ui/spinner"<Spinner />

ข้อควรรู้

ปรับขนาดด้วย className เช่น size-6 หรือ size-8
ถ้าใช้ร่วมกับปุ่ม ให้แทนที่ไอคอนเดิมของปุ่มด้วย Spinner และ disable ปุ่มไว้ระหว่างส่งข้อมูล

ซอร์สโค้ด

components/ui/spinner.tsx

import { cn } from "cn"import { Loader2Icon } from "lucide-react"function Spinner({ className, ...props }: React.ComponentProps<"svg">) {  return (    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />  )}export { Spinner }