Componente de Indicadores de Progreso
Un componente de indicadores de progreso de estilo retro/vintage con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Loading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 70%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">70% Complete</p>
</div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Uploading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 50%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">50% Uploaded</p>
</div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Downloading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 30%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">30% Downloaded</p>
</div>
<div class="mt-6">
<img class="rounded-full w-12 h-12 mx-auto" src="https://picsum.photos/200/200" alt="Random Image" />
<p class="text-center text-gray-600 dark:text-gray-400 mt-2">Vintage Style Image</p>
</div>
<div class="mt-6">
<img class="rounded-full w-12 h-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Random Avatar" />
<p class="text-center text-gray-600 dark:text-gray-400 mt-2">User Avatar</p>
</div>
</div>Componentes relacionados
Componente de Indicadores de Progreso
Un componente indicador de progreso simple y receptivo con efectos de neón/brillo y tonos joya, adecuado para sitios web de consultoría/servicios. Incluye soporte para modo oscuro.
Playful_Job_Application_Progress_Indicator
Un componente de indicador de progreso complejo, lúdico y receptivo para flujos de trabajo de solicitud de empleo, con un esquema de color dulce/dulce y soporte para modo oscuro. Diseñado para bolsas de trabajo y plataformas de desarrollo profesional, representa visualmente múltiples etapas de la solicitud con transiciones animadas y mensajes alentadores.
Componente de Indicadores de Progreso
Un componente de indicadores de progreso receptivo diseñado para un panel de interfaz de usuario en modo oscuro con un esquema de color análogo. Incluye varios indicadores de progreso como barras, círculos y una fuente de actividad, todo ello con Tailwind CSS para la compatibilidad con el modo oscuro. No se utiliza JavaScript.