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
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.
Componente de la barra de progreso
Un componente de barra de progreso responsivo diseñado teniendo en cuenta el modo oscuro, utilizando Tailwind CSS.
Barra de progreso triádica minimalista
Una barra de progreso minimalista y receptiva con esquema de color triádico y soporte para temas oscuros, adecuada para aplicaciones de redes sociales.