Componente Indicatori di progresso
Un componente degli indicatori di avanzamento ispirato al Material Design con effetti reattivi e supporto per temi scuri, creato utilizzando Tailwind CSS.
Codice HTML
<div class="container mx-auto p-5">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Progress Indicators</h2>
<div class="flex flex-col space-y-4">
<!-- Linear Progress Bar -->
<div class="w-full">
<div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full w-3/4" style="transition: width 0.5s;"></div>
</div>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Loading... 75%</p>
</div>
<!-- Circular Progress Indicator -->
<div class="flex items-center space-x-2">
<div class="relative flex items-center justify-center w-12 h-12">
<svg class="absolute animate-spin -ml-1 mr-3" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<circle class="text-gray-200 dark:text-gray-700" cx="25" cy="25" r="20" stroke-width="5" fill="none"></circle>
<path class="text-blue-600" fill="none" stroke-width="5" stroke-linecap="round" d="M25 5a20 20 0 1 0 0 40A20 20 0 0 0 25 5z" style="stroke-dasharray: 125; stroke-dashoffset: 62.5;"></path>
</svg>
<span class="text-lg text-gray-800 dark:text-gray-200">Processing</span>
</div>
</div>
<!-- Steps Progress Indicator -->
<div class="relative">
<div class="flex">
<div class="flex items-center justify-center w-10 h-10 bg-blue-600 text-white rounded-full">1</div>
<div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
<div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">2</div>
<div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
<div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">3</div>
</div>
<div class="absolute top-[-1rem] left-[calc(50%_-_2.5rem)] bg-white dark:bg-gray-800 p-2 rounded shadow-md text-center text-sm text-gray-800 dark:text-gray-200">Step 1: Details</div>
</div>
<!-- Avatar Loading Indicator -->
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700" />
<div class="flex-1">
<div class="bg-gray-300 h-2 rounded w-3/4 dark:bg-gray-600"></div>
<div class="text-gray-600 dark:text-gray-400 text-sm">User is online</div>
</div>
</div>
<!-- Image Progress Indicator -->
<div class="flex flex-col items-center space-y-1">
<img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-md shadow-md w-full max-w-xs" />
<div class="bg-blue-600 h-2 rounded w-2/3 dark:bg-blue-500"></div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #181818;
}
}
</style>Componenti correlati
Componente Indicatori di progresso
Si tratta di un componente indicatore di avanzamento in stile Material Design che utilizza Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Indicatori di progresso Componente 33
Un indicatore di avanzamento reattivo con microinterazioni in Tailwind CSS, con supporto per il tema scuro.
Componente Indicatori di progresso industriale
Un componente complesso e ad alto contrasto degli indicatori di progresso con un'estetica di design industriale, adatto per siti web aziendali/aziendali. Presenta più barre di avanzamento, una sezione di stato dettagliata e texture delle materie prime, completamente reattive con il supporto della modalità oscura.