Spinner
An indicator that can be used to show a loading state.
Installation
CLI
npx shadcn@latest add https://exawizards.com/exabase/design/registry/spinner.jsonManual
Copy and paste the following code into your project.
import { cn } from "@/lib/utils"
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
role="status"
aria-label="Loading"
width="32"
height="32"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
className={cn("size-4 animate-spin", className)}
fill="none"
{...props}
>
<path
d="M27 16C27 18.3229 26.2646 20.5862 24.8993 22.4655C23.5339 24.3448 21.6087 25.7436 19.3995 26.4615C17.1903 27.1794 14.8105 27.1795 12.6013 26.4618C10.392 25.7441 8.46668 24.3454 7.10119 22.4662C5.73571 20.587 5.00017 18.3237 5 16.0008C4.99983 13.6779 5.73503 11.4146 7.10024 9.53515C8.46545 7.65575 10.3906 6.25678 12.5997 5.53873C14.8089 4.82068 17.1886 4.82042 19.398 5.53798"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
/>
</svg>
)
}
export { Spinner }
Usage
import { Spinner } from "@/components/ui/spinner"<Spinner />Examples
Size
Use the size-* utility class to change the size of the spinner.
Color
By default, the spinner inherits the text color.
Use text color utility classes to change the color of the spinner.
Button
Add a spinner to a button to indicate a loading state. Remember to use the data-icon="inline-start" prop to add the spinner to the start of the button and the data-icon="inline-end" prop to add the spinner to the end of the button.
Badge
Add a spinner to a badge to indicate a loading state. Remember to use the data-icon="inline-start" prop to add the spinner to the start of the badge and the data-icon="inline-end" prop to add the spinner to the end of the badge.
Input Group
API
<Spinner> renders as a <svg> element.