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

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