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

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

ソーシャルメディアインターフェイスに適したニューモーフィックスタイルの進行状況インジケーターで、シンプルなレイアウトとダークモードをサポートするレスポンシブデザインが特徴です。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center p-6">
  <div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
    <h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
    <div class="my-4">
      <div class="flex justify-between">
        <span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
        <span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
      </div>
      <div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
        <div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
      <span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
    </div>
  </div>
</div>

関連コンポーネント

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

マテリアル デザインにインスパイアされた進行状況インジケーター コンポーネントで、レスポンシブ エフェクトとダーク テーマのサポートがあり、Tailwind CSS を使用して構築されています。

開ける

Playful_Job_Application_Progress_Indicator

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

開ける

ArtDecoプログレスインジケータ

複雑なアールデコ調にインスパイアされた仕事/キャリアプラットフォーム用の進捗インジケーターコンポーネントで、幾何学模様、豪華なスタイリング、補色が特徴です。ダークモードのサポートにより完全にレスポンシブ。

開ける