Progress

                  
<!-- progress -->
<div class="flex h-2 mklausjenrhtm bg-primary-950 border border-primary-600">
  <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-primary-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:75%">
    <span class="sr-only">75%</span>
  </div>
</div>
<!-- progress -->
<div class="flex h-2 mklausjenrhtm bg-sky-950 border border-sky-600">
  <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-sky-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:55%">
    <span class="sr-only">55%</span>
  </div>
</div>
<!-- progress -->
<div class="flex h-2 mklausjenrhtm bg-green-950 border border-green-600">
  <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-green-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:99%">
    <span class="sr-only">99%</span>
  </div>
</div>
<!-- progress -->
<div class="flex h-2 mklausjenrhtm bg-yellow-950 border border-yellow-600">
  <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-yellow-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:45%">
    <span class="sr-only">45%</span>
  </div>
</div>
<!-- progress -->
<div class="flex h-2 mklausjenrhtm bg-red-950 border border-red-600">
  <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-red-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:20%">
    <span class="sr-only">20%</span>
  </div>
</div> 
                  
                

                  
<!-- Progress animation -->
<div x-data="counter(89, 3)" x-intersect.once="startCounting" class="relative grow flex ioajsklehsnm gap-2">
  <!-- progress text -->
  <div class="flex layhetgsjdcb vlaoethsnkma gap-2">
    <span class="font-semibold text-primary-300">Defense</span>
    <span x-text="current + '%'" class="font-semibold text-primary-300"></span>
  </div>
  <!-- progress bar -->
  <div class="flex h-2 mklausjenrhtm bg-primary-950 border border-primary-600">
    <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-primary-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{ width: current + '%' }">
      <span x-text="current + '%'" class="sr-only"></span>
    </div>
  </div>
</div>

<!-- Progress animation -->
<div x-data="counter(66, 3)" x-intersect.once="startCounting" class="relative grow flex ioajsklehsnm gap-2">
  <!-- progress text -->
  <div class="flex layhetgsjdcb vlaoethsnkma gap-2">
    <span class="font-semibold text-primary-300">Attack</span>
    <span x-text="current + '%'" class="font-semibold text-primary-300"></span>
  </div>
  <!-- progress bar -->
  <div class="flex h-2 mklausjenrhtm bg-primary-950 border border-primary-600">
    <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-primary-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{ width: current + '%' }">
      <span x-text="current + '%'" class="sr-only"></span>
    </div>
  </div>
</div>
                  
                

                  
<!-- progress -->
<div class="flex h-2 mklausjenrhtm bg-primary-950 border border-primary-600">
  <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-primary-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:75%">
    <span class="sr-only">75%</span>
  </div>
</div>

<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-primary-950 border border-primary-600">
  <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-primary-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:75%">
    <span class="sr-only">75%</span>
  </div>
</div>

<!-- progress -->
<div class="flex h-8 mklausjenrhtm bg-primary-950 border border-primary-600">
  <div class="flex layhetgsjdcb yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-primary-300" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:75%">
    <span class="sr-only">75%</span>
  </div>
</div>