Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado con elementos 3D, utilizando un esquema de color análogo adecuado para el comercio electrónico, con soporte para modo oscuro
Código HTML
<div class="max-w-md mx-auto p-4">
<div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
<div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
<div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
70%
</div>
</div>
<div class="mt-4 text-gray-700 dark:text-gray-300">
<p class="text-sm">Progress towards your shopping goals.</p>
</div>
</div>Componentes relacionados
Barra de progreso skeuomórfica
Componente de barra de progreso skeuomórfico para carteras, con un esquema de color monocromático y un diseño complejo e interactivo con soporte de modo responsivo y oscuro mediante Tailwind CSS.
Skeuomorphic_Monochromatic_Progress_Bar
Un componente de barra de progreso skeumorphic de complejidad moderada para comercio electrónico, con un esquema de color monocromático, capacidad de respuesta total y compatibilidad con el modo oscuro.
Organic_Nature_ProgressBar
Un componente de barra de progreso de temática retro inspirado en la naturaleza para aplicaciones industriales y de fabricación, con líneas fluidas, colores apagados y compatibilidad con el modo oscuro.