Loading Indicator

Component 1

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 InlineXsDemo() {
  return (
    <div className="text-secondary flex items-center gap-2 text-sm">
      <LoadingIndicator
        type="line-simple"
        size="xs"
        label="Syncing changes..."
        inline
      />
    </div>
  );
}