Thành phần

Spinner

Ink square outline that turns while loading; labelled status, still under reduced motion.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Fetching the latest edition

Install

bash

npx shadcn add @eloquent/spinner

Usage

tsx

import { Spinner } from "@/components/ui/spinner";

<Spinner label="Loading" />

States

State	Treatment
Motion allowed	Square turns (`motion-safe:animate-spin`)
`prefers-reduced-motion: reduce`	Static gapped square

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

Đang lấy số báo mới nhất

Ink adaptation

Upstream's round Lucide Loader2 icon becomes a square ink outline with a gap. It turns only under motion-safe:; under prefers-reduced-motion the gapped square stays still and the label still announces.