Components Progress Bar Neumorphic Progress Bar

Neumorphic Progress Bar

A responsive progress bar component designed with Neumorphism style, supporting both light and dark themes using Tailwind CSS.

Preview

HTML Code

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="w-64 bg-gray-200 dark:bg-gray-900 rounded-full shadow-lg p-1">
        <div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <span class="mt-2 text-gray-700 dark:text-gray-300">70%</span>
</div>

Related Components

Neumorphism Progress Bar

Progress Bar Component with Neumorphism design, responsive effects, and dark theme support using Tailwind CSS

Open

Dark Mode Progress Bar

A responsive progress bar component designed for dark mode using Tailwind CSS, featuring a sleek design and dark theme support.

Open

Progress Bar Component

A responsive progress bar component designed with 3D elements, using an analogous color scheme suitable for e-commerce, featuring dark mode support

Open