Progress

Use the progress bar component to show the completion rate of a data indicator or use it as a loader element

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.

Setup

Import the Progressbar component in a script tag.

<script>
	import { Progressbar } from 'flowbite-svelte'
</script>

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.

<Progressbar progress="50" />

Sizes

Use the size prop to change the size of a progress bar.

Small
Default
Large
Extra Large
<Progressbar progress="50" size="h-1.5" />

<Progressbar progress="50" size="h-2.5" />

<Progressbar progress="50" size="h-4" />

<Progressbar progress="50" size="h-6" />

With label inside

Use the labelInside prop to add the progress in a progress bar.

50%
<Progressbar progress="50" size="h-4" labelInside />

With label outside

Use the labelOutside prop to add the progress outside of a progress bar.

Flowbite-Svelte 50%
<Progressbar progress="50" labelOutside="Flowbite-Svelte" />

Colors

Use the color prop to change the color of a progress bar.

Gray
Blue/Default
Red
Green
Yellow
Indigo
Purple
<Progressbar progress="50" color="gray" />

<Progressbar progress="50" color="blue" />

<Progressbar progress="50" color="red" />

<Progressbar progress="50" color="green" />

<Progressbar progress="50" color="yellow" />

<Progressbar progress="50" color="indigo" />

<Progressbar progress="50" color="purple" />

Props

The component has the following props, type, and default values. See types page for type information.

Name Type Default
progress string '45'
size string 'h-2.5'
labelInside boolean false
labelOutside string ''
color Colors 'blue'

References