LoaderPro

• Short waits where you can't show a skeleton: buttons, overlays, small panels.

• Page loads with known layout: use skeletons.

Import it from @/components/ui/loader after installing.

import { Loader } from "@/components/ui/loader";

<Loader variant="dots" />
<Loader variant="ring" size={32} label="Uploading" />

• role="status" with a label; the visuals are hidden.
• Reduced motion slows to gentle fades or stops spinning.

• Each variant loops smoothly at 0.8–1.4 seconds per cycle.

• Fixed size; inherits color from text.

• SVG and transforms only.

• Change label to describe the wait, e.g. "Saving".