Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

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%