Notus React Progressbars

These are used to show your users the progression of an action. Choose from down bellow the type and color of your progressbar. Everything here is styled using Tailwind CSS.

Simple

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

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

Filled

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

<div className="relative pt-1">
  <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200">
    <div style="width:30%" className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-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 teal, the next 15% as indigo, and the last 25% as blue. You could add the next 50% as green, to show that the progression is almost done.

<div className="relative pt-1">
  <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200">
    <div style="width: 10%" className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"></div>
    <div style="width: 15%" className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500"></div>
    <div style="width: 25%" className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-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 className="relative pt-1">
  <div className="flex mb-2 items-center justify-between">
    <div>
      <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-lightBlue-600 bg-lightBlue-200">
        Task in progress
      </span>
    </div>
    <div className="text-right">
      <span className="text-xs font-semibold inline-block text-lightBlue-600">
        0%
      </span>
    </div>
  </div>
  <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200">
  </div>
</div>

Badge and completion

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

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

Badge and multiple completion

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

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