Componente de Indicadores de Progreso
Un componente de indicadores de progreso inspirado en Material Design con efectos responsivos y compatibilidad con temas oscuros, creado con Tailwind CSS.
Código HTML
<div class="container mx-auto p-5">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Progress Indicators</h2>
<div class="flex flex-col space-y-4">
<!-- Linear Progress Bar -->
<div class="w-full">
<div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full w-3/4" style="transition: width 0.5s;"></div>
</div>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Loading... 75%</p>
</div>
<!-- Circular Progress Indicator -->
<div class="flex items-center space-x-2">
<div class="relative flex items-center justify-center w-12 h-12">
<svg class="absolute animate-spin -ml-1 mr-3" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<circle class="text-gray-200 dark:text-gray-700" cx="25" cy="25" r="20" stroke-width="5" fill="none"></circle>
<path class="text-blue-600" fill="none" stroke-width="5" stroke-linecap="round" d="M25 5a20 20 0 1 0 0 40A20 20 0 0 0 25 5z" style="stroke-dasharray: 125; stroke-dashoffset: 62.5;"></path>
</svg>
<span class="text-lg text-gray-800 dark:text-gray-200">Processing</span>
</div>
</div>
<!-- Steps Progress Indicator -->
<div class="relative">
<div class="flex">
<div class="flex items-center justify-center w-10 h-10 bg-blue-600 text-white rounded-full">1</div>
<div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
<div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">2</div>
<div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
<div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">3</div>
</div>
<div class="absolute top-[-1rem] left-[calc(50%_-_2.5rem)] bg-white dark:bg-gray-800 p-2 rounded shadow-md text-center text-sm text-gray-800 dark:text-gray-200">Step 1: Details</div>
</div>
<!-- Avatar Loading Indicator -->
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700" />
<div class="flex-1">
<div class="bg-gray-300 h-2 rounded w-3/4 dark:bg-gray-600"></div>
<div class="text-gray-600 dark:text-gray-400 text-sm">User is online</div>
</div>
</div>
<!-- Image Progress Indicator -->
<div class="flex flex-col items-center space-y-1">
<img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-md shadow-md w-full max-w-xs" />
<div class="bg-blue-600 h-2 rounded w-2/3 dark:bg-blue-500"></div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #181818;
}
}
</style>Componentes relacionados
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.
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 de indicadores de progreso receptivo con estilo de cristal, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, que admite el tema oscuro con Tailwind CSS.