Components Progress Bar Progress Bar Component

Progress Bar Component

A responsive progress bar component designed for dark mode using Tailwind CSS, suitable for modern web applications.

Preview

HTML Code

<div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

Related Components

Material Design Earthy Progress Bar

A Material Design-inspired progress bar with earth tones, suitable for social media interfaces. It is responsive and includes dark mode support using Tailwind CSS.

Open

Progress Bar

Progress Bar Component with Microinteractions design. Includes responsive effects and dark theme support using only HTML and CSS (Tailwind CSS).

Open

Progress Bar Component

A simple progress bar component styled with glassmorphism and monochromatic colors, suitable for business and corporate websites, with support for dark mode.

Open