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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<!-- Progress Bar Container -->
<div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
<!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
<div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
<span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
</div>
</div>
<!-- Another Progress Bar Example -->
<div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
<div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
<span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
</div>
</div>
</div>
Componentes relacionados
Barra de progreso del modo oscuro triádico
Un componente de barra de progreso simple y de color triádico para el modo oscuro, adecuado para blogs y consumo de contenido. Cuenta con un diseño responsivo con Tailwind CSS, utilizando el prefijo dark: para el soporte de temas oscuros sin JavaScript.
Componente de barra de progreso 3D
Un componente de barra de progreso receptivo diseñado para interfaces de redes sociales, con un efecto 3D, esquema de color monocromático y compatibilidad con modo oscuro, creado con Tailwind CSS.
Barra de progreso de pedidos de comercio electrónico
Un componente de barra de progreso receptivo para comercio electrónico con soporte para modo oscuro, con un diseño monocromático. Sin JavaScript, solo HTML y Tailwind CSS.