Striped Progress Bar

Component 1

About

A progress bar with a dashed border and an animated diagonal-striped fill that shows how far a task has completed.

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

Code

How Striped Progress Bar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Progress from "@/components/ui/progress";

export default function ProgressDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3 rounded-lg border border-border bg-card p-6 text-card-foreground">
      <div className="flex items-center justify-between text-xs font-mono uppercase tracking-wide text-muted-foreground">
        <span>Printing stub...</span>
        <span>72%</span>
      </div>
      <Progress value={72} label="Printing stub" />
    </div>
  );
}