Componente Indicatori di progresso
Un componente di indicatori di avanzamento in stile retrò/vintage con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Loading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 70%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">70% Complete</p>
</div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Uploading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 50%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">50% Uploaded</p>
</div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Downloading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 30%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">30% Downloaded</p>
</div>
<div class="mt-6">
<img class="rounded-full w-12 h-12 mx-auto" src="https://picsum.photos/200/200" alt="Random Image" />
<p class="text-center text-gray-600 dark:text-gray-400 mt-2">Vintage Style Image</p>
</div>
<div class="mt-6">
<img class="rounded-full w-12 h-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Random Avatar" />
<p class="text-center text-gray-600 dark:text-gray-400 mt-2">User Avatar</p>
</div>
</div>Componenti correlati
Componente Indicatori di progresso
Un componente per gli indicatori di avanzamento dello stile di progettazione 3D con combinazione di colori in scala di grigi per il consumo di contenuti del blog, con design reattivo e supporto per la modalità scura.
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.
Componente Indicatori di progresso
Un componente indicatore di stato con uno stile glassmorphism, un design reattivo e il supporto per i temi scuri. Utilizza Tailwind CSS per lo stile.