Loading

nordaun-ui/loading

FreeBlock

A simple loading component that can be useful when working with long loading components or fallbacks.

Live preview

live · rendered by the registry

Rendered by @nordaun/ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://ui.nordaun.com/r/loading.json

Source

src/components/ui/loading.tsxui.nordaun.com/r/loading.json

1import { cn } from "@/lib/utils";
2
3function Loading({ className, ...props }: React.ComponentProps<"div">) {
4  return (
5    <div
6      className={cn(
7        "absolute inset-0 z-10 flex items-center justify-center bg-background/50 backdrop-blur-xs",
8        className,
9      )}
10      {...props}
11    >
12      <div className="flex gap-1">
13        <span className="size-1.5 animate-pulse rounded-full bg-primary/75" />
14        <span className="size-1.5 animate-pulse rounded-full bg-primary/75 [animation-delay:150ms]" />
15        <span className="size-1.5 animate-pulse rounded-full bg-primary/75 [animation-delay:300ms]" />
16      </div>
17    </div>
18  );
19}
20
21export { Loading };

Files it writes

src/components/ui/loading.tsx

More from @nordaun/ui

All 8 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Audioaudio	@nordaun/ui	Blocks	Free	1 dep
Filefile	@nordaun/ui	Blocks	Free	1 dep · 3 files
Flagflag	@nordaun/ui	Blocks	Free	no deps · 2 files
Mapmap	@nordaun/ui	Blocks	Free	2 deps · 2 files
Passwordpassword	@nordaun/ui	Blocks	Free	1 dep
Phonephone	@nordaun/ui	Blocks	Free	2 deps · 3 files
Videovideo	@nordaun/ui	Blocks	Free	1 dep · 2 files