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 di indicatori di progresso in stile brutalista ad alto contrasto, che mostra il lavoro o i prodotti in un portfolio. È dotato di un'interfaccia ricca con più elementi interattivi, progettata per essere reattiva con il supporto del tema scuro utilizzando Tailwind CSS.
Componente Indicatori di progresso
Un componente dell'indicatore di progresso in stile lusso/premium progettato per applicazioni sportive/fitness, caratterizzato da toni gioiello, tipografia sofisticata e reattività completa con supporto per la modalità scura.
Componente Indicatori di progresso
Un complesso componente indicatore di avanzamento con sfumature di colore neutro fredde, transizioni fluide e progressione in più fasi adatto per siti Web governativi/di servizio pubblico. Include il supporto per la modalità oscura ed è completamente reattivo.