Loading Circular Progress

                    <div class="flex flex-wrap items-center justify-center gap-8 p-4">
  <!-- Circular Progress 25% -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <!-- Background Circle -->
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <!-- Progress Circle (25%) -->
      <circle 
        class="text-blue-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="188.4"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">25%</span>
    </div>
  </div>
  
  <!-- Circular Progress 50% -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <!-- Background Circle -->
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <!-- Progress Circle (50%) -->
      <circle 
        class="text-green-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="125.6"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">50%</span>
    </div>
  </div>
  
  <!-- Circular Progress 75% -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <!-- Background Circle -->
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <!-- Progress Circle (75%) -->
      <circle 
        class="text-purple-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="62.8"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">75%</span>
    </div>
  </div>
  
  <!-- Circular Progress 100% -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <!-- Background Circle -->
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <!-- Progress Circle (100%) -->
      <circle 
        class="text-red-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="0"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">100%</span>
    </div>
  </div>
</div>