Components
Spinner
Indicate an action running in the background. Unlike the loading dots, this should generally be used to indicate loading feedback in response to a user action, like for buttons, pagination, etc.
A recreation of Vercel's Geist design system.
import React from "react";
import { Spinner } from "@/components/ui/spinner";
export const Default = () => {
return (
<div className="min-h-[100vh] flex flex-col gap-10 items-center justify-center pb-4">
<div className="flex flex-col gap-5 w-[60%]">
<Spinner />
</div>
</div>
);
};
export const CustomSize = () => {
return (
<div className="min-h-[100vh] flex flex-col gap-10 items-center justify-center pb-4">
<div className="flex flex-col gap-5 w-[60%]">
<Spinner size={30} />
</div>
</div>
);
};
export const CustomColor = () => {
return (
<div className="min-h-[100vh] flex flex-col gap-10 items-center justify-center pb-4">
<div className="flex flex-col gap-5 w-[60%]">
<Spinner color="red" />
</div>
</div>
);
};Source
Published
Similar components
Explore more
Part of Geist — browse the full library on 21st.dev.