Components Progress Bar Neumorphism Progress Bar

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.

Preview

HTML Code

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
    <div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
  </div>
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Skill Progress
  </div>
</div>

<style>
.shadow-inner {
  box-shadow: inset 5px 5px 10px #b0b0b0,
              inset -5px -5px 10px #f0f0f0;
}

.dark .shadow-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a,
              inset -5px -5px 10px #363636;
}

.shadow-neumo-progress {
  box-shadow: 5px 5px 10px #a78bfa,
              -5px -5px 10px #c084fc;
}

.dark .shadow-neumo-progress-dark {
  box-shadow: 5px 5px 10px #6d28d9,
              -5px -5px 10px #7c3aed;
}
</style>

Related Components

Minimalist Triadic Progress Bar

A minimalist, responsive progress bar with triadic color scheme and dark theme support, suitable for social media applications.

Open

Organic_Nature_ProgressBar

A nature-inspired, retro-themed progress bar component for industrial and manufacturing applications, featuring flowing lines, muted colors, and dark mode support.

Open

Progress Bar

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

Open