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 de style glassmorphism pour les applications de médias sociaux, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou. Il utilise un schéma de couleurs analogue et offre une interface complexe et riche avec de multiples éléments interactifs. Le composant est réactif et prend en charge un thème sombre avec Tailwind CSS.
Volet Indicateurs de progrès
Un composant d’indicateur de progression avec un style glassmorphism, un design réactif et une prise en charge du thème sombre. Utilise Tailwind CSS pour le coiffage.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style brutaliste à fort contraste, mettant en valeur le travail ou les produits d’un portefeuille. Il dispose d’une interface riche avec plusieurs éléments interactifs, conçue pour être réactive avec la prise en charge du thème sombre à l’aide de Tailwind CSS.