Componente de barra de progreso 3D
Diseñado con efectos 3D, Tailwind CSS, diseño responsivo y compatibilidad con modo oscuro.
Código HTML
<div class='relative pt-1 dark:bg-gray-800'>
<div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
<div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
</div>
<div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>Componentes relacionados
Componente de Indicadores de Progreso
Un componente indicador de progreso simple, limpio y profesional con tonos cálidos al atardecer, adecuado para servicios comerciales y de consultoría, con diseño receptivo y soporte de modo oscuro.
Componente de Indicadores de Progreso
Un indicador de progreso simple diseñado con un efecto de morfismo de vidrio, adecuado para sitios web de comercio electrónico con soporte para modo oscuro y un esquema de color monocromático.
Indicador de progreso de sepia orgánica
Un indicador de progreso simple inspirado en la naturaleza para aplicaciones de citas/redes sociales, con tonos cálidos sepia y marrón con líneas fluidas, responsivo y compatible con el modo oscuro.