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.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Progress Indicator</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #e0f2f7; /* Light blue background */
}
.dark body {
background-color: #2c3e50; /* Dark blue background */
}
.glass-container {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark .glass-container {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.progress-bar {
background: linear-gradient(to right, #a7e6ff, #6dd5ed);
}
.dark .progress-bar {
background: linear-gradient(to right, #3498db, #2980b9);
}
</style>
</head>
<body>
<div class="min-h-screen flex items-center justify-center p-4">
<div class="glass-container rounded-lg p-6 w-full max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Your Social Milestones</h2>
<!-- Progress Item 1: Profile Completion -->
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-lg font-medium text-gray-700 dark:text-gray-200">Profile Completion</span>
<span class="text-lg font-semibold text-blue-700 dark:text-blue-300">75%</span>
</div>
<div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="progress-bar h-full rounded-full" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Complete your profile to unlock new features!</p>
</div>
<!-- Progress Item 2: Connections Growth -->
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-lg font-medium text-gray-700 dark:text-gray-200">Connections Growth</span>
<span class="text-lg font-semibold text-blue-700 dark:text-blue-300">50%</span>
</div>
<div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="progress-bar h-full rounded-full" style="width: 50%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Connect with more friends and expand your network.</p>
</div>
<!-- Progress Item 3: Post Engagement -->
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-lg font-medium text-gray-700 dark:text-gray-200">Post Engagement</span>
<span class="text-lg font-semibold text-blue-700 dark:text-blue-300">90%</span>
</div>
<div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="progress-bar h-full rounded-full" style="width: 90%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Keep creating engaging content!</p>
</div>
<!-- Interactive Goal Setting -->
<div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Set Your Next Goal</h3>
<div class="flex flex-col md:flex-row gap-4">
<input type="text" placeholder="e.g., Reach 100 connections"
class="flex-grow p-3 rounded-md bg-gray-100 dark:bg-gray-700
text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 glass-container" />
<button class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-md
transition duration-300 ease-in-out transform hover:scale-105
focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 glass-container">
Set Goal
</button>
</div>
</div>
</div>
</div>
</body>
</html>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateur de progression simple et réactif avec des effets néon/lumineux et des tons de bijoux, adapté aux sites de conseil/de services. Inclut la prise en charge du mode sombre.
Playful_Job_Application_Progress_Indicator
Un composant d’indicateur de progression complexe, ludique et réactif pour les flux de travail des candidatures, avec une palette de couleurs bonbon/sucré et la prise en charge du mode sombre. Conçu pour les sites d’emploi et les plateformes de développement de carrière, il représente visuellement plusieurs étapes de candidature avec des transitions animées et des messages encourageants.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression réactif avec un style glassmorphism, avec des éléments translucides givrés ressemblant à du verre et des effets de flou, prenant en charge le thème sombre à l’aide de Tailwind CSS.