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

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

Tailwind CSSを使用してダークテーマをサポートする、すりガラスのような半透明の要素とぼかし効果を特徴とする、glassmorphismスタイルのレスポンシブプログレスインジケーターコンポーネント。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Progress Indicators</h2>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 1</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">75%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
            </div>
        </div>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 2</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">50%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
            </div>
        </div>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 3</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">25%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
            </div>
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full">
        </div>
    </div>
</div>

関連コンポーネント

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

温かみのある夕焼けの色調を備えたシンプルでクリーンでプロフェッショナルなプログレスインジケーターコンポーネントは、ビジネスやコンサルティングサービスに適しており、レスポンシブデザインとダークモードのサポートを備えています。

開ける

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

ソーシャルメディアアプリケーション用のglassmorphismスタイルのプログレスインジケータコンポーネントで、ぼかし効果のあるすりガラスのような半透明の要素が特徴です。類似の配色を使用し、複数のインタラクティブ要素を備えた複雑でリッチなインターフェイスを提供します。このコンポーネントはレスポンシブで、Tailwind CSS を使用したダーク テーマをサポートしています。

開ける

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

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

開ける