Progress With Label

                    <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Basic Progress Bar with Label -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Downloading file</span>
      <span class="text-sm font-medium text-gray-500">45%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
    </div>
  </div>
  
  <!-- Progress Bar with Label Inside -->
  <div>
    <span class="text-sm font-medium text-gray-700">Upload progress</span>
    <div class="w-full bg-gray-200 rounded-full h-6 mt-1">
      <div class="bg-blue-600 h-6 rounded-full flex items-center justify-center text-xs font-medium text-white" style="width: 65%">65%</div>
    </div>
  </div>
  
  <!-- Progress Bar with Detailed Label -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Installation</span>
      <span class="text-sm font-medium text-blue-600">3.2 MB / 8.0 MB (40%)</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 40%"></div>
    </div>
    <span class="text-xs text-gray-500 mt-1 inline-block">Estimated time remaining: 1 minute</span>
  </div>
  
  <!-- Progress Bar with Success State -->
  <div>
    <div class="flex justify-between items-center mb-1">
      <span class="text-sm font-medium text-gray-700">Profile completion</span>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm font-medium text-green-500">Complete!</span>
      </div>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-green-600 h-2.5 rounded-full" style="width: 100%"></div>
    </div>
  </div>
  
  <!-- Progress Bar with Steps -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Checkout process</span>
      <span class="text-sm font-medium text-gray-500">Step 2 of 4</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 50%"></div>
    </div>
    <div class="flex justify-between mt-2">
      <span class="text-xs text-gray-500">Cart</span>
      <span class="text-xs font-medium text-blue-600">Shipping</span>
      <span class="text-xs text-gray-500">Payment</span>
      <span class="text-xs text-gray-500">Confirmation</span>
    </div>
  </div>
</div>