Indicadores de Progreso Componente 33
Un indicador de progreso responsivo con microinteracciones en Tailwind CSS, con soporte para temas oscuros.
Código HTML
<div class="relative flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="progress-container flex items-center justify-center">
<div class="progress-bar relative w-64 h-2 bg-gray-300 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="progress-fill w-1/2 h-full bg-blue-500 rounded-full transition-all duration-300 ease-in-out"></div>
</div>
<div class="progress-indicators flex justify-between w-full mt-2">
<div class="indicator flex flex-col items-center">
<img src="https://picsum.photos/id/101/50" alt="Avatar 1" class="mb-1 rounded-full border border-white dark:border-gray-800">
<span class="text-xs text-gray-700 dark:text-gray-300">Step 1</span>
</div>
<div class="indicator flex flex-col items-center">
<img src="https://picsum.photos/id/102/50" alt="Avatar 2" class="mb-1 rounded-full border border-white dark:border-gray-800">
<span class="text-xs text-gray-700 dark:text-gray-300">Step 2</span>
</div>
<div class="indicator flex flex-col items-center">
<img src="https://picsum.photos/id/103/50" alt="Avatar 3" class="mb-1 rounded-full border border-white dark:border-gray-800">
<span class="text-xs text-gray-700 dark:text-gray-300">Step 3</span>
</div>
</div>
</div>
<style>
.progress-fill {
animation: fill 1.5s forwards;
}
@keyframes fill {
from { width: 0%; }
to { width: 50%; }
}
</style>
</div>Componentes relacionados
Componente de Indicadores de Progreso
Un componente de indicadores de progreso de estilo de diseño 3D con esquema de color en escala de grises para el consumo de contenido del blog, con diseño receptivo y soporte de modo oscuro.
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.
Componente de Indicadores de Progreso
Un componente indicador de progreso minimalista diseñado para mostrar el progreso de la cartera utilizando colores vibrantes y un diseño receptivo con soporte para temas oscuros.