Komponenten suchen

Kategorien

Komponenten Fortschrittsbalken

Fortschrittsbalken

Indikator für den Fertigstellungsfortschritt

Cyberpunk Neo-Retro Fortschrittsbalken

Eine Fortschrittsbalkenkomponente mittlerer Komplexität mit Cyberpunk, Neo-Retro-Ästhetik, dunklem Hintergrund und gedämpften Vintage-Akzentfarben, die für Unterhaltungs-/Medienplattformen entwickelt wurde. Es verfügt über eine segmentierte Fortschrittsanzeige und ist vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen Vorschau

                <div class="p-4 sm:p-6 md:p-8 bg-[#1a1a2e] dark:bg-gray-900 min-h-screen flex items-center justify-center font-mono text-gray-200">
  <div class="w-full max-w-2xl bg-[#0f0f20] dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-[#00f7ff33] dark:border-gray-700">
    <div class="p-4 sm:p-6 md:p-8 relative">
      <div class="text-lg sm:text-xl md:text-2xl font-bold text-[#00f7ff] dark:text-[#a0a0ff] mb-4 sm:mb-6 uppercase tracking-wider before:content-[''] before:absolute before:left-0 before:top-0 before:w-1 before:h-full before:bg-[#00f7ff]">Now Playing: Interstellar Echoes</div>
      <p class="text-sm sm:text-base text-gray-400 mb-6 sm:mb-8">Track 3 of 12 - Dreamscape Protocol</p>

      <!-- Progress Bar Container -->
      <div class="w-full bg-[#3c3c5a] dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative mb-4 sm:mb-6">
        <div class="absolute top-0 left-0 h-full rounded-full transition-all duration-500 ease-out"
             style="width: 65%; background-color: #ff5757; box-shadow: 0 0 8px #ff5757, 0 0 16px #ff5757;"
             aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" role="progressbar">
        </div>
        <div class="absolute top-0 left-1/3 w-1 bg-gray-500 rounded-full h-full"></div>
        <div class="absolute top-0 left-2/3 w-1 bg-gray-500 rounded-full h-full"></div>
      </div>

      <!-- Time Display -->
      <div class="flex justify-between text-xs sm:text-sm text-gray-400 mb-6 sm:mb-8">
        <span class="text-[#ff5757]">02:45</span>
        <span>04:10</span>
      </div>

      <!-- Control Buttons -->
      <div class="flex justify-center items-center space-x-6 sm:space-x-8 text-xl sm:text-2xl">
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Previous Track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-full p-2 sm:p-3 border border-[#82e0ff] dark:border-[#c0c0ff] hover:border-[#00f7ff] dark:hover:border-[#a0a0ff] shadow-md shadow-[#82e0ff]/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.125l-3.359-3.359A.858.858 0 0010 8.358v7.284a.858.858 0 001.393.616l3.359-3.359a.858.858 0 00-.001-1.234zM12 21a9 9 0 110-18 9 9 0 010 18z" />
          </svg>
        </button>
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Next Track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Bauhaus-Fortschrittsbalken-Komponente

Eine reaktionsschnelle, vom Bauhaus inspirierte Fortschrittsbalkenkomponente mit moderater Komplexität, die für Unterhaltungs-/Medienplattformen geeignet ist und coole Neutraltöne und Unterstützung für den Dunkelmodus bietet.

Offen Vorschau

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 space-y-6">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">Now Playing</h2>
        <svg class="h-8 w-8 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4"></path>
        </svg>
      </div>

      <div class="relative w-full rounded-full h-3 bg-gray-200 dark:bg-gray-700 overflow-hidden group">
        <div class="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full transition-all duration-500 ease-out" style="width: 65%;"></div>
        <div class="absolute top-1/2 -translate-y-1/2 left-[65%] w-4 h-4 bg-gray-900 dark:bg-gray-200 rounded-full border-2 border-gray-900 dark:border-gray-200 group-hover:scale-125 transition-transform duration-200 ease-out"></div>
      </div>

      <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 font-medium">
        <span class="text-gray-900 dark:text-white">03:45</span>
        <span>05:30</span>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 items-center pt-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/id/1047/100/100" alt="Album Art" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg object-cover border-2 border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white leading-tight">Geometric Dreams</p>
            <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400 mt-1">The Bauhaus Ensemble</p>
          </div>
        </div>

        <div class="flex justify-around sm:justify-end space-x-6">
          <button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 19l-7.5-7.5 7.5-7.5" />
            </svg>
          </button>
          <button class="p-4 sm:p-5 rounded-full bg-blue-500 text-white shadow-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
              <path fill-rule="evenodd" d="M6 5v14a1 1 0 001.5 1.32l11-7a1 1 0 000-1.64l-11-7A1 1 0 006 5z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

ProgressBarComponent

Eine einfache, saubere und reaktionsschnelle Fortschrittsbalkenkomponente mit Neon/Electric-Farben für Food-/Restaurant-Websites, mit Unterstützung für den Dunkelmodus und schweizerischem/internationalem Typografie-Design.

Offen Vorschau

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8 lg:p-10 flex min-h-screen items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 leading-tight border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 md:mb-4 tracking-tight">
      Your Order Progress
    </h2>
    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 md:mb-10">
      Keep an eye on your delicious order's journey!
    </p>

    <div class="mb-6 sm:mb-8 md:mb-10">
      <div class="flex justify-between items-center mb-2">
        <span class="text-lg sm:text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:from-red-400 dark:to-pink-400">
          Preparing Your Feast
        </span>
        <span class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-200">
          75%
        </span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
        <div class="bg-gradient-to-r from-fuchsia-500 to-pink-500 dark:from-fuchsia-400 dark:to-pink-400 h-3 rounded-full" style="width: 75%;">
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-center sm:text-left">
      <div class="space-y-1">
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Estimated Delivery
        </p>
        <p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white">
          15-20 min
        </p>
      </div>
      <div class="space-y-1">
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Order ID
        </p>
        <p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white break-all">
          #FDRM_87Y5XC
        </p>
      </div>
    </div>

  </div>
</div>

Luxury_Grayscale_Social_Media_Progress_Bar

Eine komplexe, elegante und reaktionsschnelle Fortschrittsleistenkomponente für Social-Media-Schnittstellen mit einem luxuriösen Graustufen-Design mit ausgefeilter Typografie und Unterstützung für den Dunkelmodus.

Offen Vorschau

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 tracking-tight dark:text-white">Profile Completion</h2>
      <p class="text-md sm:text-lg text-center text-gray-600 dark:text-gray-300 mb-8 max-w-xl mx-auto leading-relaxed">
        Enhance your presence by completing your profile. The more complete it is, the more opportunities you'll discover.
      </p>

      <!-- Main Progress Bar -->
      <div class="mb-10">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Overall Progress</span>
          <span class="text-xl font-bold text-gray-900 dark:text-white">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
          <div class="bg-gradient-to-r from-gray-600 to-gray-900 dark:from-gray-300 dark:to-gray-500 h-full rounded-full" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Detailed Steps -->
      <div class="space-y-6">

        <!-- Step 1: Basic Info -->
        <div class="flex items-center space-x-4">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-900 dark:bg-gray-300 flex items-center justify-center">
            <svg class="w-6 h-6 text-white dark:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 9.354V10a5 5 0 00-10 0v9.354m0 0a5 5 0 00-10 0v-9.354"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Basic Profile Information</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">100%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 100%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 2: Professional Details -->
        <div class="flex items-center space-x-4 opacity-75">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 4h2a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m8 0h.01M6 16h.01"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Professional &amp; Experience</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">50%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 50%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 3: Interests and Skills -->
        <div class="flex items-center space-x-4 opacity-50">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Interests &amp; Skills</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">25%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 25%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 4: Social Links -->
        <div class="flex items-center space-x-4 opacity-25">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.102 1.101m-.757-4.898l-4 4a4 4 0 105.656 5.656l1.102-1.101"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Social Media Links</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">0%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 0%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-10 text-center">
        <button class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-gray-900 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-300 ease-in-out
                              dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
          Complete Your Profile
          <svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>
    </div>

    <!-- Decorative Footer -->
    <div class="p-4 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
      <p>Your privacy is important to us. Information shared helps connect you with relevant opportunities.</p>
    </div>

  </div>
</div>

Fortschrittsbalken für E-Commerce-Bestellungen

Eine reaktionsschnelle Fortschrittsbalkenkomponente für den E-Commerce mit Unterstützung des Dunkelmodus und einem monochromen Design. Kein JavaScript, nur HTML und Tailwind CSS.

Offen Vorschau

                <div class="dark:bg-gray-900 min-h-screen p-4 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Order Progress</h2>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Order Placed</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">100%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Processing</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Shipped</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Out for Delivery</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">25%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%;"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Delivered</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">0%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%;"></div>
      </div>
    </div>
  </div>
</div>

Minimalistischer triadischer Fortschrittsbalken

Ein minimalistischer, reaktionsschneller Fortschrittsbalken mit triadischem Farbschema und Unterstützung für dunkle Themen, geeignet für Social-Media-Anwendungen.

Offen Vorschau

                
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Progress Bar Container -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
    <!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
    </div>
  </div>

  <!-- Another Progress Bar Example -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
    <div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
    </div>
  </div>

</div>

Fortschrittsbalken

Eine reaktionsschnelle Fortschrittsleistenkomponente mit Unterstützung für den Dunkelmodus für E-Commerce, mit einem lebendigen Farbschema und einem einfachen Layout.

Offen Vorschau

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
  <div class="bg-indigo-600 h-4 rounded-full dark:bg-indigo-400" style="width: 75%;">
    <span class="absolute right-2 top-0 h-full flex items-center text-white text-xs font-bold">75%</span>
  </div>
</div>

Skeuomorpher Fortschrittsbalken

Skeuomorphe Fortschrittsbalkenkomponente für Portfolios mit monochromatischem Farbschema und komplexem, interaktivem Design mit Unterstützung für Responsive- und Dark-Modus unter Verwendung von Tailwind CSS.

Offen Vorschau

                <div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-xl shadow-2xl-inner relative">
    <div class="absolute inset-0 border-4 border-gray-400 dark:border-gray-600 rounded-xl pointer-events-none"></div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Project Progress</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Portfolio Showcase</p>
    </div>

    <div class="mb-8 relative">
      <div class="h-8 bg-gray-400 dark:bg-gray-600 rounded-full shadow-inner-lg overflow-hidden relative">
        <div class="absolute inset-y-0 left-0 w-3/4 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full shadow-lg transition-all duration-500 ease-out flex items-center justify-end pr-3"
             style="width: 75%;">
          <span class="text-white text-sm font-bold drop-shadow-md">75%</span>
        </div>
        <div class="absolute top-1/2 left-3/4 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white dark:bg-gray-200 rounded-full shadow-md border-2 border-blue-500 dark:border-blue-700"></div>
      </div>
      <div class="text-gray-700 dark:text-gray-300 text-right mt-2 text-sm">Completed</div>
    </div>

    <div class="grid grid-cols-2 gap-4 text-sm">
      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Design Phase</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">90%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Development</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">70%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Testing</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">50%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-6 rounded-full 
                     shadow-lg hover:shadow-xl active:shadow-inner-lg transition-all duration-200
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:active:bg-blue-900">
        View Details
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom Utility Classes for Skeuomorphism */
  .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
  }

  .drop-shadow-md {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
  }
</style>

Triadischer Fortschrittsbalken für den Dunkelmodus

Eine einfache und dreifarbige Fortschrittsbalkenkomponente für den Dunkelmodus, die für Blogs und den Konsum von Inhalten geeignet ist. Es verfügt über ein responsives Design mit Tailwind CSS, das das Präfix dark: für die Unterstützung dunkler Themen ohne JavaScript verwendet.

Offen Vorschau

                <div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsbalken-Komponente, die im Material Design-Stil gestaltet wurde und pastellfarbene Farbschemata für Portfolio-Vitrinen enthält. Es unterstützt den Dunkelmodus.

Offen Vorschau

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
        <div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
        <span>0%</span>
        <span>70%</span>
        <span>100%</span>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md"> 
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
        <span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
    </div>
</div>