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
Componente de barra de progreso con diseño de microinteracciones. Incluye efectos responsivos y soporte de temas oscuros usando solo HTML y CSS (Tailwind CSS).
Barra de progreso de neumorfismo
Componente de barra de progreso con diseño de neumorfismo, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS
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.