Progress

<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="66" aria-valuetext="66%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2">
  <div style="width:66%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>

<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="22" aria-valuetext="22%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2">
  <div style="width:22%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="44" aria-valuetext="44%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2">
  <div style="width:44%" class="flex h-full bg-blue-600 transition bg-red-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="66" aria-valuetext="66%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2">
  <div style="width:66%" class="flex h-full bg-blue-600 transition bg-emerald-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="88" aria-valuetext="88%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2">
  <div style="width:88%" class="flex h-full bg-blue-600 transition bg-slate-950">
  </div>
</div>

<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="11" aria-valuetext="11%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-px">
  <div style="width:11%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="22" aria-valuetext="22%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-0.5">
  <div style="width:22%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="33" aria-valuetext="33%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-1">
  <div style="width:33%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="44" aria-valuetext="44%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-1.5">
  <div style="width:44%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="55" aria-valuetext="55%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2">
  <div style="width:55%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="66" aria-valuetext="66%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2.5">
  <div style="width:66%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="77" aria-valuetext="77%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-3">
  <div style="width:77%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="88" aria-valuetext="88%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-3.5">
  <div style="width:88%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="99" aria-valuetext="99%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-4">
  <div style="width:99%" class="flex h-full bg-blue-600 transition bg-blue-600">
  </div>
</div>

<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-valuetext="100%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2">
  <div style="width:100%" class="flex h-full bg-blue-600 transition animate-pulse bg-gradient-to-r from-blue-100 via-blue-600 to-blue-100">
  </div>
</div>

<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-valuetext="100%" role="progressbar" class="relative flex w-full overflow-hidden rounded-full bg-slate-200 transition h-2">
  <div style="width:30%" class="flex h-full bg-blue-600 transition">
  </div>
  <div style="width:20%" class="flex h-full bg-red-600 transition">
  </div>
  <div style="width:50%" class="flex h-full bg-emerald-600 transition">
  </div>
</div>