Application toolkit - Progress

A progress bar displays the status of a given process.

Basic

Determinate progress bars fill the container from 0 to 100%. This reflects the progress of the process.

Open this basic progress example in new window
Copy basic progress code 
<div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
  <div class="flex flex-col justify-center overflow-hidden bg-hs2-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Close basic progress code

Labels

Add labels to your progress bars by placing text within the progress bar.

Open this labels progress example in new window
Copy labels progress code 
<div class="flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
  <div class="flex flex-col justify-center overflow-hidden bg-hs2-primary text-xs text-white text-center" role="progressbar" style="width: 57%" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100">57%</div>
</div>
Close labels progress code

Height

We only set a height value on the progress, so if you change that value the inner progress bar will automatically resize accordingly.

Open this height progress example in new window
Copy height progress code 
<div class="flex flex-col gap-4">
  <div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div class="flex flex-col justify-center overflow-hidden bg-hs2-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div class="flex flex-col justify-center overflow-hidden bg-hs2-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="flex w-full h-6 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div class="flex flex-col justify-center overflow-hidden bg-hs2-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>
Close height progress code

Vertical progress

A base form of vertical progress.

Open this vertical progress example in new window
Copy vertical progress code 
<div class="flex flex-wrap gap-8 items-center">
  <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div class="bg-hs2-primary overflow-hidden" role="progressbar" style="height: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div class="bg-hs2-primary overflow-hidden" role="progressbar" style="height: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div class="bg-hs2-primary overflow-hidden" role="progressbar" style="height: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div class="bg-hs2-primary overflow-hidden" role="progressbar" style="height: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div class="bg-hs2-primary overflow-hidden" role="progressbar" style="height: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>
Close vertical progress code

Multiple bars

Include multiple progress bars in a progress component if you need.

Open this mutiple bars progress example in new window
Copy mutiple bars progress code 
<div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
  <div class="flex flex-col justify-center overflow-hidden bg-hs2-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="flex flex-col justify-center overflow-hidden bg-hs2-secondary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="flex flex-col justify-center overflow-hidden bg-hs2-warning dark:bg-white" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="flex flex-col justify-center overflow-hidden bg-hs2-success" role="progressbar" style="width: 5%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Close mutiple bars progress code