Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado para el modo oscuro usando Tailwind CSS, adecuado para aplicaciones web modernas.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-900 p-4">
<div class="w-full max-w-md">
<h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
<div class="relative bg-gray-700 rounded-full h-4">
<div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
</div>
<div class="flex justify-between text-xs text-gray-400 mt-1">
<span>0%</span>
<span>60%</span>
<span>100%</span>
</div>
</div>
</div>
Componentes relacionados
Componente de la barra de progreso
Un componente de barra de progreso simple y sensible con influencia de Material Design, que utiliza tonos cálidos al atardecer. Ideal para aplicaciones de tecnología/SaaS, con soporte para modo oscuro.
Barra de progreso neo-retro de Cyberpunk
Un componente de barra de progreso de complejidad moderada con una estética cyberpunk, neo-retro, fondos oscuros y colores de acento vintage apagados, diseñado para plataformas de entretenimiento/medios. Cuenta con una pantalla de progreso segmentada y es totalmente sensible con soporte para el modo oscuro.
Luxury_Grayscale_Social_Media_Progress_Bar
Un componente de barra de progreso complejo, elegante y receptivo para interfaces de redes sociales, con un diseño de lujo en escala de grises con tipografía sofisticada y soporte para modo oscuro.