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.

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

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

<Progressbar progress="50" labelInside />

Label outside

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

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

Props

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

References