Komponente "Fortschrittsindikatoren"
Eine Komponente zur Fortschrittsanzeige im Stil eines Glasmorphismus für Social-Media-Anwendungen mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten. Es verwendet ein analoges Farbschema und bietet eine komplexe, reichhaltige Benutzeroberfläche mit mehreren interaktiven Elementen. Die Komponente ist responsiv und unterstützt ein dunkles Theme mit 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>Verwandte Komponenten
Komponente "Fortschrittsindikatoren" 33
Ein reaktionsschneller Fortschrittsindikator mit Mikrointeraktionen in Tailwind CSS mit Unterstützung für dunkle Themen.
Komponente "Fortschrittsindikatoren"
Eine einfache Komponente der Fortschrittsindikatoren, die von der Retro-/Vintage-Ästhetik der 80er und 90er Jahre inspiriert ist und ein komplementäres Farbschema verwendet. Entwickelt für Social-Media-Schnittstellen und reaktionsschnell mit Unterstützung für dunkle Themen.
Komponente "Fortschrittsindikatoren"
Eine Komponente für Fortschrittsindikatoren im Retro-/Vintage-Stil, die Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen verwendet.