Progress

Examples for how to use Tailwind's included progress components.

Default

Use class .bg-blue-700 rounded-sm to add different colors to progressbar.

Progress Label

Use class .bg-blue-700 rounded-sm to add different colors to progressbar.

35%
25%
50%
40%
75%
88%

Progress Striped

Add .linear-gradient to any .progressbar to apply a stripe via CSS gradient over the progress bar's background color.

Progress Sizes

For Default progress, No size class needed. you can use class .rounded-sm or .rounded-lg with .progress to change size of your progress bar.