nordaun
blockloadingsource: ok · hit
Loading
A simple loading component that can be useful when working with long loading components or fallbacks.
npx shadcn add "https://ui.nordaun.com/r/loading.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/9/2026, 5:24:04 PM
src/components/ui/loading.tsx
import { cn } from "@/lib/utils";
function Loading({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
className={cn(
"absolute inset-0 z-10 flex items-center justify-center bg-background/50 backdrop-blur-xs",
className,
)}
{...props}
>
<div className="flex gap-1">
<span className="size-1.5 animate-pulse rounded-full bg-primary/75" />
<span className="size-1.5 animate-pulse rounded-full bg-primary/75 [animation-delay:150ms]" />
<span className="size-1.5 animate-pulse rounded-full bg-primary/75 [animation-delay:300ms]" />
</div>
</div>
);
}
export { Loading };