About
An inline status indicator that shows a spinning loader while a task is pending or streaming and swaps to a checkmark once it completes.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Status Loader to your project and fits it to your theme.
Code
How Status Loader is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Loader from "@/components/ui/loader";
export default function LoaderDemo() {
return (
<div className="flex w-full max-w-sm flex-col gap-3 rounded-lg border border-border bg-background p-4 text-foreground">
<Loader state={{ status: "pending" }} label="Waiting for tool access" />
<Loader
state={{ status: "streaming" }}
label="Searching knowledge base"
/>
<Loader state={{ status: "complete" }} label="Fetched 3 documents" />
</div>
);
}
Dependencies
More by ethandaya
View all
Plan
Outcome