Components Progress Bar Neumorphism Progress Bar

Neumorphism Progress Bar

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

Preview

HTML Code

<!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
    </div>
  </div>
</div>

<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
  <div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
    </div>
  </div>
</div>

Related Components

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

Open

Neumorphism Progress Bar

A Neumorphism-styled progress bar for portfolios, featuring a pastel color scheme, moderate complexity, responsiveness, and dark theme support. No JavaScript is included; the component is built with HTML and Tailwind CSS.

Open