Progress Striped

                    <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Basic Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Striped Progress</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 relative overflow-hidden" style="width: 45%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Success Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Success Progress</span>
      <span class="text-sm font-medium text-gray-500">75%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-green-600 h-2.5 rounded-full relative overflow-hidden" style="width: 75%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Warning Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Warning Progress</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-yellow-500 h-2.5 rounded-full relative overflow-hidden" style="width: 60%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Danger Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Danger Progress</span>
      <span class="text-sm font-medium text-gray-500">30%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-red-600 h-2.5 rounded-full relative overflow-hidden" style="width: 30%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Large Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Large Striped</span>
      <span class="text-sm font-medium text-gray-500">50%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-5">
      <div class="bg-purple-600 h-5 rounded-full relative overflow-hidden" style="width: 50%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1.5rem 1.5rem;"></div>
      </div>
    </div>
  </div>
</div>