CCHub Logo CCHub Tailwind Collection
コンポーネント 進行状況インジケーター 進行状況インジケータ コンポーネント

進行状況インジケータ コンポーネント

ブルータリズムのデザイン、素朴な色調、ダークテーマのサポートを備えたレスポンシブプログレスインジケーターコンポーネントで、ブログやコンテンツサイトに適しています。

プレビュー

HTMLコード 

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

関連コンポーネント

Memphis_Weather_Progress_Indicator

メンフィスデザインスタイルのウェザープログレスインジケーターコンポーネントで、大胆なブラックとホワイトに明るいアクセントカラーが特徴で、気候データの表示に適しています。レスポンシブデザインとダークモードのサポートが含まれています。

開ける

Memphis_Gaming_Progress_Indicators

ゲーム用の複雑で応答性の高い進行状況インジケーター コンポーネントで、メンフィス デザインに触発され、夕焼けの配色が施されています。複数の進行状況バー、レベル表示、インタラクティブ要素を備え、ダーク モードがサポートされています。

開ける

進行状況インジケータ コンポーネント

スポーツ/フィットネスアプリケーション向けに設計されたラグジュアリー/プレミアムスタイルのプログレスインジケーターコンポーネントで、ジュエルトーン、洗練されたタイポグラフィ、ダークモードをサポートする完全な応答性が特徴です。

開ける