Loading Indicator

Component

About

A spinner shown while content is loading or a background action is in progress, with line, spinner and dot-circle styles, optional label and size variants.

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

Code

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

Usage.tsx

import LoadingIndicator from "@/components/ui/loading-indicator";

export default function SizesDemo() {
  return (
    <div className="flex flex-col items-start gap-8 md:flex-row">
      <LoadingIndicator
        type="line-simple"
        size="xs"
        label="Loading..."
        inline
      />
      <LoadingIndicator type="line-simple" size="sm" label="Loading..." />
      <LoadingIndicator type="line-simple" size="md" label="Loading..." />
      <LoadingIndicator type="line-simple" size="lg" label="Loading..." />
      <LoadingIndicator type="line-simple" size="xl" label="Loading..." />
    </div>
  );
}