Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateur de progression minimaliste conçu pour mettre en valeur la progression du portefeuille à l’aide de couleurs vives et d’un design réactif avec prise en charge du thème sombre.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
Volet Indicateurs de progrès
Il s’agit d’un composant d’indicateur de progression de style Material Design utilisant Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.