Kutty Home Page
Docs Components GitHub

Progress

Basic #

70%
<progress class="progress" value="70" max="100">70%</progress>

Colors #

20% 30% 40% 50% 60% 70%
<div class="space-y-2">
  <progress class="progress text-primary" value="20" max="100">20%</progress>
  <progress class="progress text-gray-500" value="30" max="100">30%</progress>
  <progress class="progress text-red-500" value="40" max="100">40%</progress>
  <progress class="progress text-green-500" value="50" max="100">50%</progress>
  <progress class="progress text-yellow-500" value="60" max="100">60%</progress>
  <progress class="progress text-gray-900" value="70" max="100">70%</progress>
</div>

Sizes #

20% 30% 40% 50% 60% 70%
<div class="space-y-2">
  <progress class="progress h-1" value="20" max="100">20%</progress>
  <progress class="progress h-2" value="30" max="100">30%</progress>
  <progress class="progress h-3" value="40" max="100">40%</progress>
  <progress class="progress h-4" value="50" max="100">50%</progress>
  <progress class="progress h-5" value="60" max="100">60%</progress>
  <progress class="progress h-6" value="70" max="100">70%</progress>
</div>

Indeterminate #

<progress class="progress" max="100"></progress>