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

ProgressBarComponent

A simple, clean, and responsive progress bar component with Neon/Electric colors for food/restaurant websites, featuring dark mode support and Swiss/International Typography design.

Open

3D Grayscale Sports Fitness Progress Bar

A complex, 3D grayscale progress bar component designed for sports and fitness applications, showing training progress with depth and visual engagement. It includes dark mode support and is fully responsive.

Open

Neumorphism Progress Bar

A responsive neumorphism-styled progress bar component designed for dashboards, incorporating an interactive feature and supporting dark mode.

Open