Componente Indicatori di progresso
Un componente degli indicatori di progresso in stile retrò/vintage che utilizza Tailwind CSS con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
Retro Progress Indicators
</h1>
<div class="w-full max-w-lg">
<!-- Progress Bar -->
<div class="mb-6">
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
</div>
<div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
<div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
</div>
</div>
</div>
<!-- Circular Progress Indicator -->
<div class="flex items-center justify-center mb-6">
<div class="relative w-24 h-24">
<img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" />
<div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
80%
</div>
</div>
</div>
<!-- Step Indicators -->
<div class="flex justify-between w-full text-center">
<div>
<div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
</div>
<div>
<div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
</div>
<div>
<div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
</div>
</div>
</div>
<div class="mt-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
<div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
</div>
</div>Componenti correlati
Componente Indicatori di progresso
Un componente indicatore di avanzamento minimalista progettato per mostrare i progressi del portfolio utilizzando colori vivaci e un design reattivo con supporto per temi scuri.
Componente degli indicatori di avanzamento del Glassmorphism
Componente degli indicatori di avanzamento Glassmorphism con combinazione di colori vibrante e complessità semplice.
Componente Indicatori di progresso
Un semplice indicatore di avanzamento progettato con un effetto glassmorphism, adatto per siti di e-commerce con supporto alla modalità scura e una combinazione di colori monocromatica.