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
Memphis_Weather_Progress_Indicator
Un composant d’indicateur de progression météorologique avec un style de design Memphis, avec un noir et blanc audacieux avec une couleur d’accent vive, adapté à l’affichage des données climatiques. Il comprend un design réactif et la prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant d’indicateur de progression de style luxe/premium conçu pour les applications de sport/fitness, avec des tons de bijoux, une typographie sophistiquée et une réactivité totale avec prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant simple d’indicateurs de progression inspiré de l’esthétique rétro/vintage des années 80 et 90, utilisant une palette de couleurs complémentaires. Conçu pour les interfaces de médias sociaux et réactif avec prise en charge du thème sombre.