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 amber. You could add the next 50% as emerald, 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-amber-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-amber-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

<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-amber-600 bg-amber-200">
        Task in progress
      </span>
    </div>
    <div class="text-right">
      <span class="text-xs font-semibold inline-block text-amber-600">
        50%
      </span>
    </div>
  </div>
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-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-amber-500"></div>
  </div>
</div>