Notus Svelte 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 class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
</div>
</div>
<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-blueGray-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-amber-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" ></div>
</div>
</div>
<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 teal, the next 15% as indigo, and the last 25% as orange. 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-blueGray-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" ></div>
</div>
</div>
<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-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-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>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" ></div>
</div>
</div>
<div class= "relative pt-1" >
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-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.
<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-blueGray-600 bg-blueGray-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-blueGray-600" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
</div>
</div>
<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-red-600 bg-red-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-red-600" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
</div>
</div>
<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-orange-600 bg-orange-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-orange-600" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
</div>
</div>
<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" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
</div>
</div>
<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-emerald-600 bg-emerald-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-emerald-600" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
</div>
</div>
<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-teal-600 bg-teal-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-teal-600" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
</div>
</div>
<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-lightBlue-600 bg-lightBlue-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-lightBlue-600" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
</div>
</div>
<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-indigo-600 bg-indigo-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-indigo-600" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
</div>
</div>
<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-purple-600 bg-purple-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-purple-600" >
0%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
</div>
</div>
<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.
<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-blueGray-600 bg-blueGray-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-blueGray-600" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" ></div>
</div>
</div>
<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-red-600 bg-red-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-red-600" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" ></div>
</div>
</div>
<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-orange-600 bg-orange-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-orange-600" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" ></div>
</div>
</div>
<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" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-amber-500" ></div>
</div>
</div>
<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-emerald-600 bg-emerald-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-emerald-600" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" ></div>
</div>
</div>
<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-teal-600 bg-teal-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-teal-600" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
</div>
</div>
<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-lightBlue-600 bg-lightBlue-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-lightBlue-600" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" ></div>
</div>
</div>
<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-indigo-600 bg-indigo-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-indigo-600" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
</div>
</div>
<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-purple-600 bg-purple-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-purple-600" >
30%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
<div style= "width:30%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" ></div>
</div>
</div>
<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.
<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-blueGray-600 bg-blueGray-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-blueGray-600" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" ></div>
</div>
</div>
<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-red-600 bg-red-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-red-600" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" ></div>
</div>
</div>
<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-orange-600 bg-orange-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-orange-600" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" ></div>
</div>
</div>
<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-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-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>
<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-emerald-600 bg-emerald-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-emerald-600" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" ></div>
</div>
</div>
<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-teal-600 bg-teal-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-teal-600" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
</div>
</div>
<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-lightBlue-600 bg-lightBlue-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-lightBlue-600" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" ></div>
</div>
</div>
<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-indigo-600 bg-indigo-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-indigo-600" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
</div>
</div>
<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-purple-600 bg-purple-200" >
Task in progress
</span>
</div>
<div class= "text-right" >
<span class= "text-xs font-semibold inline-block text-purple-600" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" ></div>
</div>
</div>
<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" >
50%
</span>
</div>
</div>
<div class= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200" >
<div style= "width: 10%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" class= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" ></div>
</div>
</div>