搜索组件

类别

组件进度指示器

进度指示器

正在进行的过程的可视化指示

进度指示器组件

专为运动/健身应用而设计的豪华/高级风格进度指示器组件，具有宝石色调、精致的排版和完全响应能力，并支持深色模式。

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 shadow-xl rounded-2xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-stone-700 transform hover:scale-[1.02] transition-all duration-300 ease-in-out">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 text-center tracking-tight leading-tight">
      Athlete Performance Overview
    </h2>
    <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 text-center max-w-2xl mx-auto opacity-90">
      Track key metrics and visualize progress towards your fitness goals with elegant precision.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-8 sm:gap-x-12 lg:gap-x-16">

      <!-- Metric 1: Endurance Progress -->
      <div class="flex flex-col items-center">
        <div class="relative w-40 h-40 sm:w-48 sm:h-48 flex items-center justify-center mb-4">
          <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
            <circle class="text-gray-200 dark:text-stone-700" stroke-width="12" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
            <circle class="text-sapphire-600 dark:text-sapphire-400 transition-all duration-700 ease-out" stroke-width="12" stroke-dasharray="339.29" stroke-dashoffset="calc(339.29 - (339.29 * 0.75))" stroke-linecap="round" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
          </svg>
          <span class="absolute text-4xl font-bold text-sapphire-700 dark:text-sapphire-300">75%</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Endurance</h3>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-xs">Achieved 75% of your aerobic fitness target.</p>
      </div>

      <!-- Metric 2: Strength Level -->
      <div class="flex flex-col items-center">
        <div class="relative w-40 h-40 sm:w-48 sm:h-48 flex items-center justify-center mb-4">
          <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
            <circle class="text-gray-200 dark:text-stone-700" stroke-width="12" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
            <circle class="text-ruby-600 dark:text-ruby-400 transition-all duration-700 ease-out" stroke-width="12" stroke-dasharray="339.29" stroke-dashoffset="calc(339.29 - (339.29 * 0.88))" stroke-linecap="round" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
          </svg>
          <span class="absolute text-4xl font-bold text-ruby-700 dark:text-ruby-300">88%</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Strength</h3>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-xs">Reached 88% of your personal strength record.</p>
      </div>

      <!-- Metric 3: Recovery Status -->
      <div class="col-span-1 md:col-span-2 flex flex-col items-center">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Recovery Score</h3>
        <div class="w-full max-w-sm bg-gray-200 dark:bg-stone-700 rounded-full h-8 sm:h-10 mb-4 overflow-hidden shadow-inner">
          <div class="bg-emerald-500 dark:bg-emerald-300 h-full rounded-full transition-all duration-700 ease-out flex items-center justify-end pr-3"
            style="width: 92%;">
            <span class="text-white dark:text-stone-900 text-sm font-semibold">92%</span>
          </div>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-lg">Excellent recovery; ready for optimal performance.</p>
      </div>

      <!-- Metric 4: Goal Completion -->
      <div class="col-span-1 md:col-span-2 flex flex-col items-center">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Overall Goal Completion</h3>
        <div class="flex items-center space-x-4 mb-4">
          <div class="relative w-28 h-28 sm:w-32 sm:h-32">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Athlete Avatar" class="w-full h-full rounded-full object-cover border-4 border-emerald-500 dark:border-emerald-300 shadow-lg">
            <span class="absolute bottom-0 right-0 bg-emerald-500 dark:bg-emerald-300 rounded-full p-1 border-2 border-white dark:border-stone-800">
              <svg class="w-6 h-6 text-white dark:text-stone-900 icon-check" 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 13l4 4L19 7"></path></svg>
            </span>
          </div>
          <div class="flex-1">
            <p class="text-3xl sm:text-4xl font-extrabold text-ruby-600 dark:text-ruby-400">+
              <span class="counter" data-count="12">12</span> Workouts This Week
            </p>
            <p class="text-lg text-gray-600 dark:text-gray-400">Exceeding weekly target of 10.</p>
          </div>
        </div>
        <div class="w-full flex justify-center mt-6">
          <button class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-bold rounded-full text-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-400 dark:focus:ring-emerald-700 active:scale-95">
            View Detailed Report
          </button>
        </div>
      </div>

    </div>
  </div>

</div>

<style>
  /* Custom properties for jewel tones */
  .text-sapphire-600 { color: #2B6CB0; } /* Tailwind blue-700 for example */
  .dark\:text-sapphire-400 { color: #63B3ED; } /* Tailwind blue-400 */
  .text-ruby-600 { color: #E53E3E; } /* Tailwind red-600 */
  .dark\:text-ruby-400 { color: #FC8181; } /* Tailwind red-400 */
  .text-emerald-700 { color: #047857; } /* Tailwind emerald-700 */
  .dark\:text-emerald-400 { color: #34D399; } /* Tailwind emerald-400 */
  .bg-emerald-500 { background-color: #10B981; } /* Tailwind emerald-500 */
  .dark\:bg-emerald-300 { background-color: #6EE7B7; } /* Tailwind emerald-300 */

  /* If you want specific custom jewel tones */
  /*
  .text-sapphire-600 { color: #0F4C81; }
  .dark\:text-sapphire-400 { color: #5B9BD5; }
  .text-ruby-600 { color: #9C1943; }
  .dark\:text-ruby-400 { color: #E03B87; }
  .text-emerald-700 { color: #007A4D; }
  .dark\:text-emerald-400 { color: #3DCC91; }
  .bg-emerald-500 { background-color: #00B06B; }
  .dark\:bg-emerald-300 { background-color: #72E0AF; }
  */

  /* Animation for circular progress */
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
  }

  /* Counter animation (requires JS for actual counting, but static HTML shows final state) */
  /* For dynamic effect, a small JS snippet would be needed outside the scope of this task. */
  /* Example of how a JS counter might be initialized: */
  /*
  document.querySelectorAll('.counter').forEach(counter => {
    const updateCount = () => {
      const target = +counter.getAttribute('data-count');
      const count = +counter.innerText;

      const increment = target / 200;

      if (count < target) {
        counter.innerText = Math.ceil(count + increment);
        setTimeout(updateCount, 1);
      } else {
        counter.innerText = target;
      }
    };
    updateCount();
  });
  */
</style>

进度指示器组件

一个简单的响应式进度指示器组件，具有霓虹灯/发光效果和宝石色调，适用于咨询/服务网站。包括深色模式支持。

打开预览

                <div class="font-sans bg-stone-950 text-emerald-300 min-h-screen p-8 sm:p-12 lg:p-16 flex items-center justify-center dark:bg-gray-950 dark:text-emerald-300">
  <div class="w-full max-w-4xl">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 sm:mb-14 relative group leading-tight">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-emerald-200 to-emerald-400 drop-shadow-lg inline-block relative">
        Our Consulting Process
        <span class="absolute inset-x-0 bottom-[-5px] h-[3px] bg-gradient-to-r from-emerald-500 via-emerald-300 to-emerald-500 blur-sm opacity-75 animate-pulse"></span>
      </span>
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      <!-- Step 1 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">1</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Discovery</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Understanding your unique needs and challenges through detailed consultation.</p>
        </div>
      </div>

      <!-- Step 2 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">2</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Strategy</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Crafting tailored strategies and actionable plans specific to your objectives.</p>
        </div>
      </div>

      <!-- Step 3 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">3</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Execution</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Implementing solutions and providing hands-on support for successful deployment.</p>
        </div>
      </div>

      <!-- Step 4 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">4</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Growth</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Monitoring performance and refining strategies for continuous improvement and growth.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Memphis_Gaming_Progress_Indicators

一个复杂的、响应式的游戏进度指示器组件，灵感来自 Memphis Design，具有日落配色方案。具有多个进度条、关卡显示和交互式元素，并支持深色模式。

打开预览

                <div class="bg-gradient-to-br from-orange-300 to-red-400 dark:from-gray-800 dark:to-gray-950 p-6 sm:p-8 md:p-10 lg:p-12 font-sans overflow-hidden relative rounded-lg shadow-xl">

  <!-- Memphis background elements (for visual flair) -->
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
    <div class="absolute w-40 h-40 bg-yellow-400 dark:bg-yellow-600 rounded-full opacity-50 -top-10 -left-10 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-60 h-60 bg-red-500 dark:bg-red-700 rounded-lg transform rotate-45 opacity-40 top-1/3 left-1/4 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-32 h-32 bg-orange-600 dark:bg-orange-800 rounded-full opacity-60 bottom-10 right-10 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-52 h-52 bg-pink-400 dark:bg-pink-600 rounded-full opacity-50 -bottom-20 -right-20 mix-blend-multiply blur-xl"></div>
  </div>

  <div class="relative z-10 space-y-8">
    <!-- Header / Title -->
    <div class="text-center mb-8">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white dark:text-orange-300 drop-shadow-lg leading-tight relative">
        Player Progress
        <span class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-2 bg-yellow-300 dark:bg-yellow-500 rounded-full"></span>
      </h2>
      <p class="mt-3 text-sm sm:text-base text-orange-100 dark:text-gray-400 font-medium">Track your epic journey through the gaming world!</p>
    </div>

    <!-- Level Indicator & Player Info -->
    <div class="flex flex-col md:flex-row items-center justify-between bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-4 sm:p-6 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transition-all duration-300 hover:shadow-2xl">
      <div class="flex items-center space-x-4 mb-4 md:mb-0">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg">
        <div>
          <p class="text-xl sm:text-2xl font-bold text-white dark:text-orange-300 drop-shadow-md">TurboGamerX</p>
          <p class="text-sm text-orange-100 dark:text-gray-400">Rank: Grand Master</p>
        </div>
      </div>
      <div class="text-center sm:text-right">
        <div class="bg-yellow-400 dark:bg-yellow-600 px-6 py-2 rounded-full shadow-lg transform rotate-2 hover:rotate-0 transition-transform duration-300">
          <p class="text-2xl sm:text-3xl font-extrabold text-red-700 dark:text-red-900 drop-shadow">Level 42</p>
        </div>
      </div>
    </div>

    <!-- Progress Bars Section -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- XP Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Experience Points (XP)</p>
        <div class="w-full bg-red-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-yellow-300 to-orange-500 dark:from-yellow-400 dark:to-orange-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 75%;">
            <div class="absolute top-0 right-0 h-full w-2 bg-yellow-200 dark:bg-yellow-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">75% (8500 / 11333 XP)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Next Level: 2833 XP</p>
      </div>

      <!-- Quest Completion Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Quests Completed</p>
        <div class="w-full bg-green-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-teal-300 to-blue-500 dark:from-teal-400 dark:to-blue-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 90%;">
             <div class="absolute top-0 right-0 h-full w-2 bg-teal-200 dark:bg-teal-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">90% (81 / 90 Quests)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Keep going, champion!</p>
      </div>

      <!-- Event Score Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Event Score: "Dragon's Ascent"</p>
        <div class="w-full bg-purple-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-pink-300 to-purple-500 dark:from-pink-400 dark:to-purple-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 60%;">
             <div class="absolute top-0 right-0 h-full w-2 bg-pink-200 dark:bg-pink-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">60% (12000 / 20000 Pts)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Earn 8000 more points for exclusive rewards!</p>
      </div>

      <!-- Achievements Progress -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Achievements Unlocked</p>
        <div class="flex items-center space-x-3">
          <div class="relative w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-red-500 dark:bg-red-700 text-white flex items-center justify-center text-4xl sm:text-5xl font-bold border-4 border-yellow-300 dark:border-yellow-500 shadow-md">
            <span class="animate-pulse">🎉</span>
          </div>
          <div>
            <p class="text-2xl sm:text-3xl font-extrabold text-white dark:text-orange-300">15 / 20</p>
            <p class="text-sm text-orange-100 dark:text-gray-400">Total Achievements</p>
          </div>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-3">Almost there! Unlock unique titles and badges.</p>
      </div>

    </div>

    <!-- Call to Action / Footer -->
    <div class="text-center pt-8">
      <button class="bg-yellow-400 dark:bg-orange-600 hover:bg-yellow-500 dark:hover:bg-orange-700 text-red-800 dark:text-white font-bold py-3 px-8 rounded-full shadow-lg transform scale-105 hover:scale-110 transition-all duration-300 relative overflow-hidden group">
        <span class="relative z-10">Explore All Stats</span>
        <span class="absolute top-0 left-0 w-full h-full bg-white/20 dark:bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse"></span>
      </button>
      <p class="mt-4 text-xs text-orange-200 dark:text-gray-500 font-medium">Continue your adventure and set new records!</p>
    </div>

  </div>
</div>

赛博朋克农业进度指示器

一组未来主义的赛博朋克主题进度指示器，适用于农业或农业网站，具有温暖的日落色调。响应式，支持深色模式。

打开预览

                <div class="bg-zinc-950 text-orange-400 min-h-screen p-4 sm:p-8 dark:bg-black dark:text-orange-300 font-mono">
  <div class="max-w-7xl mx-auto py-8 lg:py-12">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-8 sm:mb-12 tracking-wide uppercase leading-tight text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-600 dark:from-yellow-300 dark:to-orange-500 drop-shadow-md">
      Agro-Bot 7.0: Crop Cycle Nexus
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Progress Card 1: Planting Phase -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-600 to-red-800 rounded-full opacity-20 blur-xl dark:from-yellow-500 dark:to-orange-700"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Planting Protocol</h3>
          <svg class="h-8 w-8 text-orange-500 group-hover:animate-pulse dark:text-red-600" 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.663 17h4.673M12 21h.01M17 7h3a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2h3m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M7 7h10"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Seed deployment and initial nutrient injection. Progress critical for sprout emergence.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 85%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">85% Complete</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
          Last Check: 10/26/23 14:30 GMT
        </div>
      </div>

      <!-- Progress Card 2: Growth Monitoring -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Biomass Accumulation</h3>
          <svg class="h-8 w-8 text-yellow-500 group-hover:animate-spin dark:text-orange-600" 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Real-time monitoring of crop growth and health indicators. AI-driven pathogen detection.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 60%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">60% Data Collected</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8h4a4 4 0 100-8H8zm0 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
          Next Scan: 10/27/23 08:00 GMT
        </div>
      </div>

      <!-- Progress Card 3: Resource Optimization -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Hydro-Energy Flow</h3>
          <svg class="h-8 w-8 text-red-500 group-hover:scale-125 transition-transform duration-300 dark:text-orange-600" 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 10V3L4 14h7v7l9-11h-7z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Water and nutrient delivery system status. Awaiting recalibration of soil sensors.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 40%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">40% Optimized</div>
        <div class="mt-5 flex items-start text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-red-500 animate-bounce" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.672-1.3 3.437 0L14.4 7.252c1.346 2.241-.019 5.06-2.5 5.06h-5.8c-2.481 0-3.847-2.819-2.5-5.06l2.744-4.503z" clip-rule="evenodd"></path></svg>
          <span class="text-red-500 uppercase font-bold">Alert:</span> Sensor Array Offline
        </div>
      </div>

      <!-- Progress Card 4: Harvesting Forecast -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-400 to-red-600 rounded-full opacity-20 blur-xl dark:from-yellow-300 dark:to-orange-500"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Yield Prediction</h3>
          <svg class="h-8 w-8 text-orange-500 group-hover:rotate-12 transition-transform duration-300 dark:text-red-600" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Forecasting harvest dates and estimated output based on current growth data.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 75%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">75% Confidence</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <img src="https://picsum.photos/id/1015/30/30" alt="Farm Worker Avatar" class="rounded-full w-6 h-6 mr-2 border border-orange-500 dark:border-yellow-400">
          Analyst: Unit Alpha-7
        </div>
      </div>

      <!-- Progress Card 5: Supply Chain Logistics -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Logistics Network</h3>
          <svg class="h-8 w-8 text-yellow-500 group-hover:translate-x-1 transition-transform duration-300 dark:text-orange-600" 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 17v-5m3 5v-1.11a3 3 0 011.66-2.793L16.2 8.3c.75-.414 1.25-.133 1.25.75V17m-9 4h6a2 2 0 002-2v-3a2 2 0 00-2-2H9a2 2 0 00-2 2v3a2 2 0 002 2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Coordination of automated transport units and storage facilities. Route optimization initiated.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 90%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">90% Routes Optimized</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-8a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          Status: Auto-Dispatch Active
        </div>
      </div>

      <!-- Progress Card 6: Environmental Impact -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Eco-Footprint Analysis</h3>
          <svg class="h-8 w-8 text-red-500 group-hover:animate-pulse dark:text-orange-600" 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="M7 11V7a2 2 0 012-2h4a2 2 0 012 2v4m-.586 1.707a2 2 0 002.828 0L20 10.414V17a2 2 0 01-2 2H6a2 2 0 01-2-2V7.414L6.586 5.828a2 2 0 000-2.828z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Analyzing resource consumption and waste generation for sustainability metrics. Goal: Carbon Negative.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 95%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">95% Reviewed</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Environmentalist Avatar" class="rounded-full w-6 h-6 mr-2 border border-red-500 dark:border-orange-500">
          Validated by: Dr. Neo Verde
        </div>
      </div>

    </div>

    <div class="text-center mt-12 sm:mt-16">
      <button class="px-8 py-3 rounded-full text-lg font-bold uppercase tracking-wider
        bg-gradient-to-r from-orange-600 to-red-800 text-white shadow-lg 
        hover:from-orange-700 hover:to-red-900 focus:outline-none focus:ring-4 
        focus:ring-orange-500 focus:ring-opacity-75 transition-all duration-300 
        transform hover:scale-105 active:scale-95
        dark:from-yellow-500 dark:to-orange-700 dark:hover:from-yellow-600 dark:hover:to-orange-800
        dark:focus:ring-yellow-400 dark:shadow-red-800/40">
        Initiate System Recalibration
      </button>
    </div>

  </div>
</div>

Memphis_Weather_Progress_Indicator

具有 Memphis 设计风格的天气进度指示器组件，具有大胆的黑色和白色，带有明亮的强调色，适合显示气候数据。它包括响应式设计和深色模式支持。

打开预览

                <div class="p-4 sm:p-8 md:p-12 min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-4 border-gray-900 dark:border-gray-50 transform skew-y-2 lg:skew-y-0 lg:skew-x-2 transition-all duration-300">
    <div class="relative p-6 sm:p-8 md:p-10 lg:p-12 grid grid-cols-1 md:grid-cols-2 gap-8 text-center md:text-left">
      
      <!-- Accent Background Shape -->
      <div class="absolute inset-0 bg-fuchsia-500 dark:bg-teal-500 opacity-80 z-0 transform -rotate-3 translate-x-2 translate-y-2 rounded-lg"></div>
      <div class="absolute inset-0 bg-fuchsia-500 dark:bg-teal-500 opacity-80 z-0 transform rotate-2 translate-x-4 translate-y-4 rounded-lg"></div>

      <div class="relative z-10 flex flex-col items-center md:items-start justify-center">
        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold mb-4 uppercase text-gray-900 dark:text-gray-50 leading-tight tracking-wider">
          Climate Progress
        </h2>
        <p class="text-sm sm:text-base md:text-lg text-gray-700 dark:text-gray-300 mb-6 max-w-sm">
          Tracking key climate indicators for a sustainable future. Data insights at a glance.
        </p>
        <span class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black text-fuchsia-600 dark:text-teal-400 mb-4 transform -rotate-6">
          ⚡
        </span>
      </div>

      <div class="relative z-10 flex flex-col items-center justify-center gap-6">

        <!-- Progress Bar 1: Temperature Anomaly -->
        <div class="w-full">
          <div class="flex items-center justify-between mb-2">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Temperature Anomaly</p>
            <span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">+1.2°C</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
            <div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 70%;">
              <div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 70%;"></div>
            </div>
          </div>
          <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">70% of limit</p>
        </div>

        <!-- Progress Bar 2: Sea Level Rise -->
        <div class="w-full">
          <div class="flex items-center justify-between mb-2">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sea Level Rise</p>
            <span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">+0.8 cm/year</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
            <div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 45%;">
                <div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 45%;"></div>
            </div>
          </div>
          <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">45% of forecast</p>
        </div>

        <!-- Progress Bar 3: CO2 Concentration -->
        <div class="w-full">
          <div class="flex items-center justify-between mb-2">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">CO2 Concentration</p>
            <span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">419 ppm</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
            <div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 85%;">
                <div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 85%;"></div>
            </div>
          </div>
          <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">85% above pre-industrial</p>
        </div>

      </div>
    </div>

    <!-- Decorative Bottom Bar -->
    <div class="relative h-12 sm:h-16 md:h-20 bg-gray-900 dark:bg-gray-50 flex items-center justify-center border-t-4 border-gray-50 dark:border-gray-900 transform -skew-y-2 lg:skew-y-0 lg:skew-x-2 transition-all duration-300">
        <div class="absolute inset-0 bg-fuchsia-700 dark:bg-teal-700 opacity-80 z-0 transform rotate-3 scale-x-105"></div>
        <span class="relative z-10 text-xl sm:text-2xl font-bold text-white dark:text-gray-900 uppercase tracking-widest">Climate Insights</span>
    </div>
  </div>
</div>

进度指示器组件

响应式进度指示器组件，具有粗野主义设计、大地色调和深色主题支持，适用于博客或内容网站。

打开预览

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono">
  <div class="w-full max-w-2xl bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100 p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] mb-8">
    <h1 class="text-3xl md:text-5xl text-stone-900 dark:text-stone-100 mb-6 border-b-4 border-stone-900 dark:border-stone-100 pb-2">Article Progress</h1>
    
    <!-- Progress Bar 1 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 1: Introduction</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 30%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">30% Completed</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 2: Core Concepts</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 65%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">65% Completed</p>
    </div>

    <!-- Progress Bar 3 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 3: Conclusion</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 10%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">10% Completed</p>
    </div>

    <!-- Article Completion Indicator -->
    <div class="mt-8 pt-4 border-t-4 border-stone-900 dark:border-stone-100">
      <h2 class="text-2xl md:text-3xl text-stone-900 dark:text-stone-100 mb-4">Overall Article Progress</h2>
      <div class="w-full bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 h-10 flex items-center justify-center relative">
        <div class="h-full bg-green-700 dark:bg-green-400 transition-all duration-700 ease-out" style="width: 45%;"></div>
        <span class="absolute text-stone-100 dark:text-stone-900 text-lg font-bold">45% Complete</span>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-2 text-sm text-center">Keep reading to finish the article!</p>
    </div>

  </div>
</div>

进度指示器组件

用于社交媒体应用程序的 glassmorphism 样式进度指示器组件，具有具有模糊效果的磨砂玻璃状半透明元素。它使用类似的配色方案，并提供具有多个交互元素的复杂、丰富的界面。该组件响应迅速，并支持使用 Tailwind CSS 的深色主题。

打开预览

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

进度指示器组件

响应式进度指示器组件，专为具有类似配色方案的深色模式 UI 仪表板而设计。它包括各种进度指示器，如条形图、圆圈和活动源，所有这些都使用 Tailwind CSS 设置样式以支持深色模式。不使用 JavaScript。

打开预览

                <div class="min-h-screen bg-gray-900 text-gray-100 p-8 dark:bg-gray-900">
  <h1 class="text-4xl font-bold mb-8 text-indigo-400">Dashboard Progress</h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Progress Bar 1 -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-purple-300">Project Alpha Progress</h2>
      <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
        <div class="bg-gradient-to-r from-purple-500 to-indigo-500 h-4 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-400">75% Complete - Next deadline in 5 days</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-blue-300">Task Beta Completion</h2>
      <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
        <div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-4 rounded-full" style="width: 90%;"></div>
      </div>
      <p class="text-sm text-gray-400">90% Done - Awaiting final review</p>
    </div>

    <!-- Circular Progress -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
      <h2 class="text-2xl font-semibold mb-4 text-green-300">Server Load</h2>
      <div class="relative w-24 h-24 mb-2">
        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
          <circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"></circle>
          <circle class="text-green-500 stroke-current progress-ring__circle" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="251.2" stroke-dashoffset="62.8"></circle>
        </svg>
        <span class="absolute inset-0 flex items-center justify-center text-xl font-bold text-green-400">75%</span>
      </div>
      <p class="text-sm text-gray-400">Current CPU Usage</p>
    </div>

    <!-- Activity Feed -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg col-span-1 md:col-span-2 lg:col-span-1">
      <h2 class="text-2xl font-semibold mb-4 text-orange-300">Recent Activity</h2>
      <ul class="space-y-4">
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">John Doe</span> updated project status <span class="text-orange-400">"In Progress"</span></p>
        </li>
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">Jane Smith</span> completed <span class="text-orange-400">"Design Mockups"</span> task</p>
        </li>
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">Team Lead</span> reviewed <span class="text-orange-400">" sprint 2 tasks"</span></p>
        </li>
      </ul>
    </div>

    <!-- Key Performance Indicators (KPIs) -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-teal-300">Key Performance Indicators</h2>
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Conversion Rate:</span>
          <span class="text-teal-400 font-bold">4.5%</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Bounce Rate:</span>
          <span class="text-red-400 font-bold">55%</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Avg. Session Duration:</span>
          <span class="text-teal-400 font-bold">3:45 min</span>
        </div>
      </div>
    </div>

    <!-- Donut Chart Placeholder (Conceptual, requires JS for actual functionality) -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
      <h2 class="text-2xl font-semibold mb-4 text-pink-300">Project Distribution</h2>
      <div class="relative w-32 h-32">
        <div class="absolute inset-0 rounded-full bg-pink-500 opacity-70" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);"></div>
        <div class="absolute inset-0 rounded-full bg-purple-500 opacity-70" style="clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="w-20 h-20 rounded-full bg-gray-800"></div>
        </div>
      </div>
      <p class="text-sm text-gray-400 mt-2">Marketing (50%), Development (50%)</p>
    </div>

  </div>

  <!-- Footer or additional dashboard elements -->
  <div class="mt-8 text-center text-gray-600">
    <p>&copy; 2023 Dashboard Analytics. All rights reserved.</p>
  </div>

</div>

BrutalistGrayscaleProgressBar （粗野灰度进度条）

用于博客内容的野兽派风格的灰度进度条，具有简单的设计、深色模式支持和响应能力。

打开预览

                <div class="w-full bg-gray-800 h-4 dark:bg-gray-200">
  <div class="bg-gray-400 h-4 dark:bg-gray-600" style="width: 50%;"></div>
</div>

进度指示器组件

具有高对比度的粗野派风格进度指示器组件，用于展示作品集中的工作或产品。它具有具有多个交互式元素的丰富界面，旨在使用 Tailwind CSS 响应深色主题支持。

打开预览

                <div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-8 space-y-8">
  <h1 class="text-4xl font-bold mb-4 text-gray-100">Portfolio Progress Indicators</h1>
  <div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg space-y-6">
    <h2 class="text-2xl font-bold text-gray-200">Current Projects</h2>
    <div class="space-y-4">
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 1" class="rounded-full">
          <span class="text-lg font-semibold">Project Alpha</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-green-500" style="width: 60%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 2" class="rounded-full">
          <span class="text-lg font-semibold">Project Beta</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-yellow-500" style="width: 40%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 3" class="rounded-full">
          <span class="text-lg font-semibold">Project Gamma</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-red-500" style="width: 80%;"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg">
    <h2 class="text-2xl font-bold text-gray-200">Completed Projects</h2>
    <div class="space-y-4">
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 4" class="rounded-full">
          <span class="text-lg font-semibold">Project Delta</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-blue-500" style="width: 100%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 5" class="rounded-full">
          <span class="text-lg font-semibold">Project Epsilon</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-purple-500" style="width: 90%;"></div>
        </div>
      </div>
    </div>
  </div>
</div>