Volet Indicateurs de progrès
Composant d’indicateurs de progression réactif conçu pour un tableau de bord d’interface utilisateur en mode sombre avec un schéma de couleurs analogue. Il comprend divers indicateurs de progression tels que des barres, des cercles et un flux d’activité, le tout stylisé avec Tailwind CSS pour la prise en charge du mode sombre. Aucun JavaScript n’est utilisé.
HTML Code
<div class="min-h-screen bg-gray-900 text-gray-100 p-8 dark:bg-gray-900">
<h1 class="text-4xl font-bold mb-8 text-indigo-400">Dashboard Progress</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Progress Bar 1 -->
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4 text-purple-300">Project Alpha Progress</h2>
<div class="w-full bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-gradient-to-r from-purple-500 to-indigo-500 h-4 rounded-full" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-400">75% Complete - Next deadline in 5 days</p>
</div>
<!-- Progress Bar 2 -->
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4 text-blue-300">Task Beta Completion</h2>
<div class="w-full bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-4 rounded-full" style="width: 90%;"></div>
</div>
<p class="text-sm text-gray-400">90% Done - Awaiting final review</p>
</div>
<!-- Circular Progress -->
<div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
<h2 class="text-2xl font-semibold mb-4 text-green-300">Server Load</h2>
<div class="relative w-24 h-24 mb-2">
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
<circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"></circle>
<circle class="text-green-500 stroke-current progress-ring__circle" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="251.2" stroke-dashoffset="62.8"></circle>
</svg>
<span class="absolute inset-0 flex items-center justify-center text-xl font-bold text-green-400">75%</span>
</div>
<p class="text-sm text-gray-400">Current CPU Usage</p>
</div>
<!-- Activity Feed -->
<div class="bg-gray-800 p-6 rounded-lg shadow-lg col-span-1 md:col-span-2 lg:col-span-1">
<h2 class="text-2xl font-semibold mb-4 text-orange-300">Recent Activity</h2>
<ul class="space-y-4">
<li class="flex items-center space-x-3">
<div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
<p class="text-gray-300"><span class="font-medium">John Doe</span> updated project status <span class="text-orange-400">"In Progress"</span></p>
</li>
<li class="flex items-center space-x-3">
<div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
<p class="text-gray-300"><span class="font-medium">Jane Smith</span> completed <span class="text-orange-400">"Design Mockups"</span> task</p>
</li>
<li class="flex items-center space-x-3">
<div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
<p class="text-gray-300"><span class="font-medium">Team Lead</span> reviewed <span class="text-orange-400">" sprint 2 tasks"</span></p>
</li>
</ul>
</div>
<!-- Key Performance Indicators (KPIs) -->
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4 text-teal-300">Key Performance Indicators</h2>
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="text-gray-300">Conversion Rate:</span>
<span class="text-teal-400 font-bold">4.5%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-300">Bounce Rate:</span>
<span class="text-red-400 font-bold">55%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-300">Avg. Session Duration:</span>
<span class="text-teal-400 font-bold">3:45 min</span>
</div>
</div>
</div>
<!-- Donut Chart Placeholder (Conceptual, requires JS for actual functionality) -->
<div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
<h2 class="text-2xl font-semibold mb-4 text-pink-300">Project Distribution</h2>
<div class="relative w-32 h-32">
<div class="absolute inset-0 rounded-full bg-pink-500 opacity-70" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);"></div>
<div class="absolute inset-0 rounded-full bg-purple-500 opacity-70" style="clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-20 h-20 rounded-full bg-gray-800"></div>
</div>
</div>
<p class="text-sm text-gray-400 mt-2">Marketing (50%), Development (50%)</p>
</div>
</div>
<!-- Footer or additional dashboard elements -->
<div class="mt-8 text-center text-gray-600">
<p>© 2023 Dashboard Analytics. All rights reserved.</p>
</div>
</div>Composants associés
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.
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.
Volet Indicateurs de progrès
Un indicateur de progression simple conçu avec un effet de glassmorphism, adapté aux sites Web de commerce électronique avec prise en charge du mode sombre et une palette de couleurs monochromatiques.