Progressbars

These are used to show your users the progression of an action. Choose from down bellow the type and color of your progressbar.


Simple

Progressbar with 0% completed. You can use this at the start of your progression.

<div class="relative pt-1">
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200">
  </div>
</div>

Filled

Progressbar with 30% completed. Just change the width style property from 30% to your level of progress completion.

<div class="relative pt-1">
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200">
    <div style="width:30%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500"></div>
  </div>
</div>

Multiple colors

You can have multiple colors, for your multiple stages of progression completion. The bellow example shows the first 10% as red, the next 15% as orange, and the last 25% as yellow. You could add the next 50% as green, to show that the progression is almost done.

<div class="relative pt-1">
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-yellow-200">
    <div style="width: 10%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"></div>
    <div style="width: 15%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
    <div style="width: 25%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"></div>
  </div>
</div>

Badge

Alongside your progress you can also add a Badge and a Percentage so that your users can easily understand the progression completion.

Task in progress
0%
<div class="relative pt-1">
  <div class="flex mb-2 items-center justify-between">
    <div>
      <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200">
        Task in progress
      </span>
    </div>
    <div class="text-right">
      <span class="text-xs font-semibold inline-block text-pink-600">
        0%
      </span>
    </div>
  </div>
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200">
  </div>
</div>

Badge and completion

The following example is a progress bar with badge and 30% completions.

Task in progress
30%
<div class="relative pt-1">
  <div class="flex mb-2 items-center justify-between">
    <div>
      <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200">
        Task in progress
      </span>
    </div>
    <div class="text-right">
      <span class="text-xs font-semibold inline-block text-pink-600">
        30%
      </span>
    </div>
  </div>
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200">
    <div style="width:30%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500"></div>
  </div>
</div>

Badge and multiple completion

You can also add a Badge to a multiple states progressbar.

Task in progress
50%
<div class="relative pt-1">
  <div class="flex mb-2 items-center justify-between">
    <div>
      <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-yellow-600 bg-yellow-200">
        Task in progress
      </span>
    </div>
    <div class="text-right">
      <span class="text-xs font-semibold inline-block text-yellow-600">
        50%
      </span>
    </div>
  </div>
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-yellow-200">
    <div style="width: 10%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"></div>
    <div style="width: 15%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
    <div style="width: 25%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"></div>
  </div>
</div>