Componente de Indicadores de Progreso
Este es un componente indicador de progreso al estilo de Material Design que utiliza Tailwind CSS, con efectos responsivos y soporte para temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">
<!-- Linear Progress Bar -->
<div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
<div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
</div>
<!-- Spacer -->
<div class="my-8"></div>
<!-- Circular Progress Indicator -->
<div class="relative">
<div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
<div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
75%
</div>
</div>
<!-- Spacer -->
<div class="my-8"></div>
<!-- Linear Progress Bar with Label -->
<div class="w-64">
<div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
<span class="text-base font-medium">Progress</span>
<span class="text-sm font-medium">45%</span>
</div>
<div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
<div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
</div>
</div>
</div>Componentes relacionados
Indicador de progreso de sepia orgánica
Un indicador de progreso simple inspirado en la naturaleza para aplicaciones de citas/redes sociales, con tonos cálidos sepia y marrón con líneas fluidas, responsivo y compatible con el modo oscuro.
Componente de Indicadores de Progreso
Un simple componente de Indicadores de Progreso inspirado en la estética retro/vintage de los años 80 y 90, utilizando una combinación de colores complementaria. Diseñado para interfaces de redes sociales y responsivo con soporte para temas oscuros.
Componente de Indicadores de Progreso
Un componente indicador de progreso de estilo glassmorphism para aplicaciones de redes sociales, con elementos translúcidos esmerilados similares al vidrio esmerilado con efectos de desenfoque. Utiliza un esquema de color análogo y ofrece una interfaz compleja y rica con múltiples elementos interactivos. El componente es responsivo y admite un tema oscuro con Tailwind CSS.