Componente de Indicadores de Progreso
Un componente indicador de progreso de estilo glassmorphism para aplicaciones de redes sociales, con elementos translúcidos esmerilados similares al vidrio esmerilado con efectos de desenfoque. Utiliza un esquema de color análogo y ofrece una interfaz compleja y rica con múltiples elementos interactivos. El componente es responsivo y admite un tema oscuro con Tailwind CSS.
Código 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>Componentes relacionados
Indicadores de Progreso Componente 33
Un indicador de progreso responsivo con microinteracciones en Tailwind CSS, con soporte para temas oscuros.
Componente de indicadores de progreso de Glassmorphism
Componente de indicadores de progreso de Glassmorphism con esquema de color vibrante y complejidad simple.
Componente de Indicadores de Progreso
Un simple componente de Indicadores de Progreso inspirado en la estética retro/vintage de los años 80 y 90, utilizando una combinación de colores complementaria. Diseñado para interfaces de redes sociales y responsivo con soporte para temas oscuros.