Componentes Barra de progreso Barra de progreso de neumorfismo

Barra de progreso de neumorfismo

Una barra de progreso de estilo Neumorphism para portafolios, con una combinación de colores pastel, complejidad moderada, capacidad de respuesta y compatibilidad con temas oscuros. No se incluye JavaScript; el componente está construido con HTML y Tailwind CSS.

Vista previa

Código HTML

<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>

Componentes relacionados

Barra de progreso

Componente de barra de progreso con diseño de microinteracciones. Incluye efectos responsivos y soporte de temas oscuros usando solo HTML y CSS (Tailwind CSS).

Abrir

Componente de la barra de progreso del modo oscuro

Un componente de barra de progreso de modo oscuro receptivo para sitios web comerciales / corporativos, que utiliza colores vibrantes y elementos interactivos.

Abrir

Barra de progreso de pedidos de comercio electrónico

Un componente de barra de progreso receptivo para comercio electrónico con soporte para modo oscuro, con un diseño monocromático. Sin JavaScript, solo HTML y Tailwind CSS.

Abrir