Progress bar Components

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.

<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.

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

With label outside

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

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

Colors

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

<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.

References