Components Progress Bar Progress Bar Component

Progress Bar Component

A simple progress bar component styled in a brutalism design with a grayscale color scheme for e-commerce applications. It is responsive and features dark mode support.

Preview

HTML Code

<div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

Related Components

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 responsive progress bar component designed for dark mode using Tailwind CSS, suitable for modern web applications.

Open

3D Progress Bar Component

A responsive progress bar component designed for social networking interfaces, featuring a 3D effect, monochromatic color scheme, and dark mode support, built using Tailwind CSS.

Open