Fortschrittsbalken

Fortschrittsbalken für Glasmorphismus

Fortschrittsbalken im Glassmorphism-Stil, der für Social-Media-Schnittstellen entwickelt wurde, mit lebendigen Farben und Unterstützung für den Dunkelmodus. Einfaches Layout ohne JavaScript.

Vorschau öffnen

                <div class="w-full bg-gray-200 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full h-4 dark:bg-gray-700 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-4 rounded-full" style="width: 75%;"></div>
</div>

Komponente des Fortschrittsbalkens im Dunkelmodus

Eine reaktionsschnelle Fortschrittsbalkenkomponente im Dunkelmodus für Geschäfts-/Unternehmenswebsites mit leuchtenden Farben und interaktiven Elementen.

Vorschau öffnen

                <div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit einem pastellfarbenen Farbschema entwickelt wurde und für Geschäfts-/Unternehmenswebsites geeignet ist.

Vorschau öffnen

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1 text-sm text-white">
            <span>0%</span>
            <span>100%</span>
        </div>
        <div class="h-2 bg-gray-600 rounded">
            <div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="text-white">John Doe</span>
        </div>
        <span class="text-gray-400 dark:text-gray-500">In Progress</span>
    </div>
</div>

Fortschrittsbalken für den Dunkelmodus

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde, mit einem schlanken Design und Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="bg-gray-800 rounded-lg p-4 w-full">
    <h3 class="text-white text-lg font-semibold mb-2">Progress Bar</h3>
    <div class="relative pt-1">
        <div class="flex mb-2 items-center justify-between">
            <div>
                <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
                    70%
                </span>
            </div>
            <div class="text-right">
                <span class="text-xs font-semibold inline-block text-teal-600">
                    Completed
                </span>
            </div>
        </div>
        <div class="flex h-2 mb-4 rounded bg-gray-700">
            <div class="w-7/12 h-full bg-teal-600 rounded"></div>
        </div>
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600 mr-2">
        <span class="text-white text-sm">John Doe</span>
    </div>
</div>

Neumorpher Fortschrittsbalken

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die im Neumorphism-Stil entwickelt wurde und sowohl helle als auch dunkle Designs mit Tailwind CSS unterstützt.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="w-64 bg-gray-200 dark:bg-gray-900 rounded-full shadow-lg p-1">
        <div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <span class="mt-2 text-gray-700 dark:text-gray-300">70%</span>
</div>

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die mit Blick auf den Dunkelmodus entwickelt wurde und Tailwind CSS verwendet.

Vorschau öffnen

                <div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="w-full max-w-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
          70%
        </span>
        <span class="text-xs font-semibold inline-block text-gray-400">
          7/10
        </span>
      </div>
      <div class="h-2 bg-gray-700 rounded">
        <div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
      </div>
    </div>
    <p class="text-gray-400 text-sm mt-2">Loading...</p>
  </div>
</div>

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde und für moderne Webanwendungen geeignet ist.

Vorschau öffnen

                <div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

Fortschrittsbalken für Neumorphismus

Fortschrittsbalken-Komponente mit Neumorphism-Design, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS

Vorschau öffnen

                <!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
    </div>
  </div>
</div>

<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
  <div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
    </div>
  </div>
</div>

Fortschrittsbalkenkomponente mit Mikrointeraktionsdesign. Enthält reaktionsschnelle Effekte und Unterstützung für dunkle Themen, die nur HTML und CSS (Tailwind CSS) verwenden.

Vorschau öffnen

                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

Kategorien

Fortschrittsbalken