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.
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
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.
Barra de progreso neo-retro de Cyberpunk
Un componente de barra de progreso de complejidad moderada con una estética cyberpunk, neo-retro, fondos oscuros y colores de acento vintage apagados, diseñado para plataformas de entretenimiento/medios. Cuenta con una pantalla de progreso segmentada y es totalmente sensible con soporte para el modo oscuro.
Luxury_Grayscale_Social_Media_Progress_Bar
Un componente de barra de progreso complejo, elegante y receptivo para interfaces de redes sociales, con un diseño de lujo en escala de grises con tipografía sofisticada y soporte para modo oscuro.