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.
<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.
Name | Type | Default |
---|---|---|
progress | string | '45' |
size | string | 'h-2.5' |
labelInside | boolean | false |
labelOutside | string | '' |
color | Colors | 'blue' |