Components
Spinner used as part of other components to enable a loading state or as a standalone element. Comes in small, medium and large sizes with responsive syntax support, primary color by default and an inherit color that follows the parent element's text color.
Loading preview...
import { Reshaped } from "reshaped/bundle";
import Loader from "@/components/ui/reshaped-loader";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<div
style={{
background: "var(--rs-color-black)",
color: "var(--rs-color-white)",
padding: "var(--rs-unit-x4)",
borderRadius: "var(--rs-radius-small)",
display: "inline-block",
verticalAlign: "top",
}}
>
<Loader color="inherit" ariaLabel="Loading" />
</div>
</div>
</Reshaped>
);
}
Loading preview...