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
BrutalistaEscala de grisesBarra de progreso
Una barra de progreso en escala de grises de estilo brutalista para el contenido del blog, con un diseño simple, compatibilidad con el modo oscuro y capacidad de respuesta.
ArtDeco_Food_Restaurant_Progress_Indicators
Componente de indicadores de progreso inspirado en el Art Deco para sitios web de alimentos / restaurantes, con patrones geométricos, estilo lujoso y tonos tierra. Interfaz compleja con múltiples pasos y soporte para modo oscuro.
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.