Volet Indicateurs de progrès
Un composant d’indicateurs de progression inspiré de Material Design avec des effets réactifs et la prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateur de progression réactif avec un design brutalisme, des tons de couleur terreux et une prise en charge du thème sombre, adapté à un blog ou à un site de contenu.
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 complexe et monochrome sur le thème des réseaux sociaux avec une interface utilisateur en mode sombre, avec plusieurs barres de progression, un flux d’activité et des avatars d’utilisateurs.