カテゴリ

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

進行状況インジケーター

進行中のプロセスの視覚的な指標

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

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

                <div class='relative pt-1 dark:bg-gray-800'>
  <div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
    <div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
  </div>
  <div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>

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

glassmorphism スタイル、レスポンシブデザイン、およびダークテーマのサポートを備えた進行状況インジケータコンポーネント。スタイリングにはTailwind CSSを使用します。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen p-6 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    
    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Task Completion</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
      </div>
    </div>

    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Resource Usage</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Download Progress</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">90%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 90%"></div>
      </div>
    </div>

  </div>
</div>

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

Tailwind CSS を使用したレトロ/ビンテージスタイルのプログレスインジケーターコンポーネントで、レスポンシブエフェクトとダークテーマのサポートを備えています。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
        Retro Progress Indicators
    </h1>
    <div class="w-full max-w-lg">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="relative pt-1">
                <div class="flex mb-2 items-center justify-between">
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
                </div>
                <div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
                    <div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <!-- Circular Progress Indicator -->
        <div class="flex items-center justify-center mb-6">
            <div class="relative w-24 h-24">
                <img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" /> 
                <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
                    80%
                </div>
            </div>
        </div>
        <!-- Step Indicators -->
        <div class="flex justify-between w-full text-center">
            <div>
                <div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
        <div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
    </div>
</div>

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

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

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>

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

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

プレビューを開く

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

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

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

プレビューを開く

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

進捗インジケータコンポーネント 33

Tailwind CSSのマイクロインタラクションを備えたレスポンシブプログレスインジケーターで、ダークテーマのサポートを備えています。

プレビューを開く

                <div class="relative flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="progress-container flex items-center justify-center">
        <div class="progress-bar relative w-64 h-2 bg-gray-300 dark:bg-gray-700 rounded-full overflow-hidden">
            <div class="progress-fill w-1/2 h-full bg-blue-500 rounded-full transition-all duration-300 ease-in-out"></div>
        </div>
        <div class="progress-indicators flex justify-between w-full mt-2">
            <div class="indicator flex flex-col items-center">
                <img src="https://picsum.photos/id/101/50" alt="Avatar 1" class="mb-1 rounded-full border border-white dark:border-gray-800">
                <span class="text-xs text-gray-700 dark:text-gray-300">Step 1</span>
            </div>
            <div class="indicator flex flex-col items-center">
                <img src="https://picsum.photos/id/102/50" alt="Avatar 2" class="mb-1 rounded-full border border-white dark:border-gray-800">
                <span class="text-xs text-gray-700 dark:text-gray-300">Step 2</span>
            </div>
            <div class="indicator flex flex-col items-center">
                <img src="https://picsum.photos/id/103/50" alt="Avatar 3" class="mb-1 rounded-full border border-white dark:border-gray-800">
                <span class="text-xs text-gray-700 dark:text-gray-300">Step 3</span>
            </div>
        </div>
    </div>
    <style>
        .progress-fill {
            animation: fill 1.5s forwards;
        }

        @keyframes fill {
            from { width: 0%; }
            to { width: 50%; }
        }
    </style>
</div>

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

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

プレビューを開く

                <div class="container mx-auto p-5">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Progress Indicators</h2>

    <div class="flex flex-col space-y-4">
        <!-- Linear Progress Bar -->
        <div class="w-full">
            <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-blue-600 h-2.5 rounded-full w-3/4" style="transition: width 0.5s;"></div>
            </div>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Loading... 75%</p>
        </div>

        <!-- Circular Progress Indicator -->
        <div class="flex items-center space-x-2">
            <div class="relative flex items-center justify-center w-12 h-12">
                <svg class="absolute animate-spin -ml-1 mr-3" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
                    <circle class="text-gray-200 dark:text-gray-700" cx="25" cy="25" r="20" stroke-width="5" fill="none"></circle>
                    <path class="text-blue-600" fill="none" stroke-width="5" stroke-linecap="round" d="M25 5a20 20 0 1 0 0 40A20 20 0 0 0 25 5z" style="stroke-dasharray: 125; stroke-dashoffset: 62.5;"></path>
                </svg>
                <span class="text-lg text-gray-800 dark:text-gray-200">Processing</span>
            </div>
        </div>

        <!-- Steps Progress Indicator -->
        <div class="relative">
            <div class="flex">
                <div class="flex items-center justify-center w-10 h-10 bg-blue-600 text-white rounded-full">1</div>
                <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
                <div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">2</div>
                <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
                <div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">3</div>
            </div>
            <div class="absolute top-[-1rem] left-[calc(50%_-_2.5rem)] bg-white dark:bg-gray-800 p-2 rounded shadow-md text-center text-sm text-gray-800 dark:text-gray-200">Step 1: Details</div>
        </div>

        <!-- Avatar Loading Indicator -->
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700" />
            <div class="flex-1">
                <div class="bg-gray-300 h-2 rounded w-3/4 dark:bg-gray-600"></div>
                <div class="text-gray-600 dark:text-gray-400 text-sm">User is online</div>
            </div>
        </div>

        <!-- Image Progress Indicator -->
        <div class="flex flex-col items-center space-y-1">
            <img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-md shadow-md w-full max-w-xs" />
            <div class="bg-blue-600 h-2 rounded w-2/3 dark:bg-blue-500"></div>
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #181818;
        }
    }
</style>