Barra de progreso de neumorfismo
Un componente de barra de progreso con estilo neumorfismo receptivo diseñado para paneles, que incorpora una función interactiva y admite el modo oscuro.
Código HTML
<div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
</div>
</div>
</div>Componentes relacionados
Industrial_Travel_Progress_Bar
Un componente simple de barra de progreso de estilo industrial para sitios web de viajes/turismo, con un esquema de color púrpura/violeta y capacidad de respuesta completa con soporte para modo oscuro.
Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado en el estilo de Material Design, que incorpora esquemas de colores pastel para exhibiciones de portafolios. Es compatible con el modo oscuro.
Componente de la barra de progreso
Un componente simple de la barra de progreso con estilo de vidrio y colores monocromáticos, adecuado para sitios web comerciales y corporativos, con soporte para el modo oscuro.