Componente Indicatori di progresso
Un componente indicatore di stato in stile glassmorphism per applicazioni di social media, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Utilizza una combinazione di colori analoga e offre un'interfaccia complessa e ricca con più elementi interattivi. Il componente è reattivo e supporta un tema scuro con Tailwind CSS.
Codice HTML
<!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>Componenti correlati
Indicatori di progresso Componente 33
Un indicatore di avanzamento reattivo con microinterazioni in Tailwind CSS, con supporto per il tema scuro.
Componente Indicatori di progresso
Un componente indicatore di avanzamento minimalista progettato per mostrare i progressi del portfolio utilizzando colori vivaci e un design reattivo con supporto per temi scuri.
Componente Barra di avanzamento 3D
Progettato con effetti 3D, Tailwind CSS, design reattivo e supporto per la modalità oscura.