Vue Notus 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.


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


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

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 green. You could add the next 50% as green, to show that the progression is almost done.


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

Badge and completion

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

Badge and multiple completion

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