Myna UI

Progresses

Basic

Last Edited on January 25, 2022

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

Colors

Last Edited on January 25, 2022

<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="11"
  aria-valuetext="11%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 11%" class="flex h-full bg-red-600 transition"></div>
</div>
<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="22"
  aria-valuetext="22%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 22%" class="flex h-full bg-orange-600 transition"></div>
</div>
<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="33"
  aria-valuetext="33%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 33%" class="flex h-full bg-amber-600 transition"></div>
</div>
<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="44"
  aria-valuetext="44%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 44%" class="flex h-full bg-yellow-600 transition"></div>
</div>
<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="55"
  aria-valuetext="55%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 55%" class="flex h-full bg-lime-600 transition"></div>
</div>
<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="66"
  aria-valuetext="66%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 66%" class="flex h-full bg-green-600 transition"></div>
</div>
<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="77"
  aria-valuetext="77%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 77%" class="flex h-full bg-emerald-600 transition"></div>
</div>
<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="88"
  aria-valuetext="88%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 88%" class="flex h-full bg-teal-600 transition"></div>
</div>
<div
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="99"
  aria-valuetext="99%"
  role="progressbar"
  class="relative flex h-2 w-full overflow-hidden rounded-full bg-gray-200 transition">
  <div style="width: 99%" class="flex h-full bg-cyan-600 transition"></div>
</div>

Indeterminate

Last Edited on January 25, 2022

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

Multiple

Last Edited on January 25, 2022

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

Sizes

Last Edited on January 25, 2022

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