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

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

レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートを特徴とするレトロ/ビンテージスタイルのプログレスインジケーターコンポーネント。

プレビュー

HTMLコード 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Loading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 70%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">70% Complete</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Uploading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 50%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">50% Uploaded</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Downloading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 30%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">30% Downloaded</p>
    </div>
    <div class="mt-6">
        <img class="rounded-full w-12 h-12 mx-auto" src="https://picsum.photos/200/200" alt="Random Image" />
        <p class="text-center text-gray-600 dark:text-gray-400 mt-2">Vintage Style Image</p>
    </div>
    <div class="mt-6">
        <img class="rounded-full w-12 h-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Random Avatar" />
        <p class="text-center text-gray-600 dark:text-gray-400 mt-2">User Avatar</p>
    </div>
</div>

関連コンポーネント

Playful_Job_Application_Progress_Indicator

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

開ける

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

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

開ける

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

これは、Tailwind CSS を使用したマテリアル デザイン スタイルの進捗インジケータ コンポーネントで、レスポンシブ エフェクトとダーク テーマのサポートを備えています。

開ける