CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken ProgressBarComponent

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.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Neumorpher Fortschrittsbalken

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

Offen

Skeuomorphic_Monochromatic_Progress_Bar

Eine skeumorphe Fortschrittsbalkenkomponente mittlerer Komplexität für den E-Commerce mit monochromatischem Farbschema, vollständiger Responsivität und Unterstützung für den Dunkelmodus.

Offen

Gradient Rainbow Fortschrittsbalken für die Fotografie

Eine komplexe, reaktionsschnelle Fortschrittsleistenkomponente für Fotoportfolios mit einem mehrfarbigen Regenbogendesign mit Farbverlauf und Unterstützung für den Dunkelmodus. Ideal für die Präsentation des Ladens von Fotos oder des Fortschritts von Galerien.

Offen