Modern Verticle Progress

Component 37

About

The Modern Progress component creates a modern progress bar. It supports hover effects, color changes, and pixel shape customization.

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import { useEffect } from "react";
import { Component } from "@/components/ui/modern-verticle-progress";

export default function DemoOne() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(progress + 1);
    }, 100);
    return () => clearInterval(interval);
  }, [progress]);

  return (
    <div className="w-full h-full flex items-center justify-center max-w-xl">
      <Component
        value={progress}
        className="border-purple-500"
        indicatorClassName="bg-purple-500"
        showText
      />
    </div>
  );
};