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

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

ハイコントラストのブルータリストスタイルのプログレスインジケーターコンポーネントで、ポートフォリオ内の作品や製品を紹介します。複数のインタラクティブ要素を備えた豊富なインターフェイスを備えており、Tailwind CSSを使用したダークテーマのサポートでレスポンシブになるように設計されています。

プレビュー

HTMLコード 

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

関連コンポーネント

3D プログレスバーコンポーネント

3Dエフェクト、Tailwind CSS、レスポンシブデザイン、ダークモードのサポートでスタイリングされています。

開ける

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

ダークモード UI ダッシュボード用に設計されたレスポンシブな進行状況インジケータ コンポーネントで、類似の配色が施されています。これには、バー、円、アクティビティフィードなどのさまざまな進行状況インジケーターが含まれており、すべてダークモードをサポートするためにTailwind CSSでスタイル設定されています。JavaScriptは使用しておりません。

開ける

Playful_Job_Application_Progress_Indicator

ジョブ応募ワークフロー用の複雑で遊び心があり、応答性の高い進行状況インジケータコンポーネントで、キャンディー/スウィートの配色とダークモードのサポートを特長としています。求人掲示板やキャリア開発プラットフォーム向けに設計されており、アニメーション化されたトランジションと励ましのメッセージで複数の応募ステージを視覚的に表現します。

開ける