Gradient Rainbow Progress Bar for Photography

<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-4 text-center">
        Loading Your Masterpiece Gallery
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-8 text-center">
        Please wait while we prepare your high-resolution photographs.
      </p>

      <div class="relative h-6 sm:h-8 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden shadow-inner mb-6">
        <div class="absolute inset-0 rounded-full animate-progress-rainbow-full" style="width: 75%;">
          <div class="h-full rounded-full" style="background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #84cc16, #22c55e, #06b6d4, #3b82f6, #6366f1, #a855f7, #ec4899);"></div>
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="text-xs sm:text-sm font-semibold text-white dark:text-gray-100 mix-blend-difference">75% Complete</span>
        </div>
      </div>

      <div class="text-center text-sm text-gray-500 dark:text-gray-400">
        Preparing image: <span class="font-medium">'Sunset_Over_Mountains_HDR_001.jpg'</span>
      </div>

      <div class="mt-8 grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300">
          <img src="https://picsum.photos/id/1015/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <p class="text-white text-xs font-semibold">Image 1</p>
          </div>
          <div class="absolute bottom-2 right-2 text-white text-xs bg-black/50 px-2 py-1 rounded-full">&#10003;</div>
        </div>
        <div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300">
          <img src="https://picsum.photos/id/1084/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <p class="text-white text-xs font-semibold">Image 2</p>
          </div>
          <div class="absolute bottom-2 right-2 text-white text-xs bg-black/50 px-2 py-1 rounded-full">&#10003;</div>

        </div>
        <div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-blue-500 dark:border-blue-400 transition-all duration-300 shadow-md animate-pulse">
          <img src="https://picsum.photos/id/107/300/300" alt="Placeholder image" class="w-full h-full object-cover grayscale" loading="lazy">
          <div class="absolute inset-0 flex items-center justify-center bg-black/60">
            <div class="w-8 h-8 sm:w-10 sm:h-10 border-4 border-t-4 border-white border-t-white-500 rounded-full animate-spin"></div>
          </div>
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <p class="text-white text-xs font-semibold">Image 3</p>
          </div>
        </div>
        <div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300 opacity-60">
          <img src="https://picsum.photos/id/1069/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <p class="text-white text-xs font-semibold">Image 4</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes progress-rainbow-full {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }
  .animate-progress-rainbow-full {
    background-size: 200% 100%;
    animation: progress-rainbow-full 2s ease-in-out infinite alternate;
  }
</style>