Progress bar Components

Import the `Progressbar` component in a script tag.

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

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" />

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" />

Label inside

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

50%
<Progressbar progress="50" labelInside />

Label outside

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

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

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