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
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.
Industrial_Travel_Progress_Bar
Un componente simple de barra de progreso de estilo industrial para sitios web de viajes/turismo, con un esquema de color púrpura/violeta y capacidad de respuesta completa con soporte para modo oscuro.
Componente de la barra de progreso
Un componente de barra de progreso complejo y receptivo para servicios gubernamentales/públicos, con un diseño limpio y minimalista con una paleta monocromática y acento brillante, compatibilidad con modo oscuro e información de progreso detallada.