Loader

aqua/loader

FreeComponent

The twelve-spoke spinner, ticking around in steps like the original.

Live preview

live · rendered by the registry

Rendered by aqua on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://aqua.duca.dev/r/loader.json

Source

registry/aqua/ui/loader.tsxaqua.duca.dev/r/loader.json

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5const SPOKES = Array.from({ length: 12 }, (_, index) => index)
6 
7function Loader({ className, ...props }: React.ComponentProps<"svg">) {
8  return (
9    <svg
10      viewBox="0 0 24 24"
11      fill="none"
12      role="status"
13      aria-label="Loading"
14      className={cn(
15        "size-6 animate-[spin_0.9s_steps(12)_infinite] text-[#5a6069] motion-reduce:animate-none",
16        className
17      )}
18      {...props}
19    >
20      {SPOKES.map((spoke) => (
21        <rect
22          key={spoke}
23          x="11.3"
24          y="2"
25          width="1.4"
26          height="5.6"
27          rx="0.7"
28          fill="currentColor"
29          opacity={(spoke + 1) / 12}
30          transform={`rotate(${spoke * 30} 12 12)`}
31        />
32      ))}
33    </svg>
34  )
35}
36 
37export { Loader }

Files it writes

registry/aqua/ui/loader.tsx

More from aqua

All 26 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Alertalert	aqua	Components	Free	1 dep
Avataravatar	aqua	Components	Free	1 dep
Badgebadge	aqua	Components	Free	2 deps
Buttonbutton	aqua	Components	Free	2 deps
Chat Bubblechat-bubble	aqua	Components	Free	no deps
Checkboxcheckbox	aqua	Components	Free	2 deps
Code Blockcode-block	aqua	Components	Free	2 deps · 2 files
Cursorcursor	aqua	Components	Free	no deps