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

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