Progress

The progress bar component can be used as an indicator to show the completion rate of data sets or it can be used as an animated loader component. There are multiple sizes, colors, and styles available. ## Default progress bar Use the following example of a progress bar element to show a completion rate of 45% by using an inline style and the utility classes from Tailwind CSS.

## Sizes Use the `size` prop to change the size of a progress bar.

Small

Default

Large

Extra Large

## With label inside Use the `labelInside` prop to add the progress in a progress bar.

50%

## With label outside Use the `labelOutside` prop to add the progress outside of a progress bar.

Flowbite-Svelte 50%

## Colors Use the `color` prop to change the color of a progress bar.

Gray

Blue

Red

Green

Yellow

Indigo

Purple

## Custom style Use `labelInsideClass` prop to style your progressbar.

Size h-3 50%

50%

Size h-10 50%

50%

Size h-6 50%

50%

## Animation By default progress bar has animation disabled, you can activate with `animate`, you can custumize with `tweenDuration` and `easing`. By changing `precision` you can custumize the precision inside the progress bar.

With animation 45%

0.00%

Without animation 45%

45%