Progress Circular

                    <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-600" 
        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-yellow-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>

<div class="flex flex-wrap items-center justify-center gap-8 p-4 mt-8">
  <!-- Small Circular Progress -->
  <div class="relative w-16 h-16">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <circle class="text-gray-200" stroke-width="10" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <circle 
        class="text-blue-600" 
        stroke-width="10" 
        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-sm font-bold text-gray-700">50%</span>
    </div>
  </div>
  
  <!-- Circular Progress with Icon -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="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="0"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <svg class="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  
  <!-- Circular Progress with Animation -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full animate-pulse" viewBox="0 0 100 100">
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <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="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 with Label -->
  <div class="flex flex-col items-center">
    <div class="relative w-24 h-24">
      <svg class="w-full h-full" viewBox="0 0 100 100">
        <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
        <circle 
          class="text-blue-600" 
          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>
    <span class="mt-2 text-sm font-medium text-gray-700">Downloading</span>
  </div>
</div>