Reshaped Loader

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Loader to your project and fits it to your theme.

Code

How Reshaped Loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}