Component Library
Browse and explore components
Progressbar
A Progress Bar is a UI component used to visually indicate the progression of a task or process.
Default Progress Bar
Component Code
Copy Code
import { Progress } from 'flowbite-react'
const DefaultProgressCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Progress progress={20} />
<Progress progress={40} />
<Progress progress={60} />
<Progress progress={80} />
<Progress progress={100} />
</div>
</div>
)
}
export default DefaultProgressCode
Label Progress Bar
Progress20%
Progress40%
Progress60%
Progress80%
Progress100%
Component Code
Copy Code
import { Progress } from 'flowbite-react'
const LabelProgressCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Progress
progress={20}
textLabel='Progress'
size='lg'
labelProgress
labelText
/>
<Progress
progress={40}
textLabel='Progress'
size='lg'
labelProgress
labelText
/>
<Progress
progress={60}
textLabel='Progress'
size='lg'
labelProgress
labelText
/>
<Progress
progress={80}
textLabel='Progress'
size='lg'
labelProgress
labelText
/>
<Progress
progress={100}
textLabel='Progress'
size='lg'
labelProgress
labelText
/>
</div>
</div>
)
}
export default LabelProgressCode
Progress Bar Label Positioning
MaterialM
20%
MaterialPro
40%
AdminProPro
60%
Flexy
80%
Spike
100%
Component Code
Copy Code
import { Progress } from 'flowbite-react'
const LabelPositionCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Progress
progress={20}
progressLabelPosition='inside'
textLabel='MaterialM'
textLabelPosition='outside'
size='lg'
labelProgress
labelText
/>
<Progress
progress={40}
progressLabelPosition='inside'
textLabel='MaterialPro'
textLabelPosition='outside'
size='lg'
labelProgress
labelText
/>
<Progress
progress={60}
progressLabelPosition='inside'
textLabel='AdminProPro'
textLabelPosition='outside'
size='lg'
labelProgress
labelText
/>
<Progress
progress={80}
progressLabelPosition='inside'
textLabel='Flexy'
textLabelPosition='outside'
size='lg'
labelProgress
labelText
/>
<Progress
progress={100}
progressLabelPosition='inside'
textLabel='Spike'
textLabelPosition='outside'
size='lg'
labelProgress
labelText
/>
</div>
</div>
)
}
export default LabelPositionCode
Progress Bar Sizing
Small
Default
Large
Extra Large
Component Code
Copy Code
import { Progress } from 'flowbite-react'
const ProgressSizeCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<div className='text-base font-medium dark:text-white'>Small</div>
<Progress progress={45} size='sm' color='primary' />
<div className='text-base font-medium dark:text-white'>Default</div>
<Progress progress={45} size='md' color='primary' />
<div className='text-lg font-medium dark:text-white'>Large</div>
<Progress progress={45} size='lg' color='primary' />
<div className='text-lg font-medium dark:text-white'>Extra Large</div>
<Progress progress={45} size='xl' color='primary' />
</div>
</div>
)
}
export default ProgressSizeCode
Progress Bar Color
Primary
Secondary
Error
Success
Warning
Info
Component Code
Copy Code
import { Progress } from 'flowbite-react'
const ProgressColorCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<div className='text-base font-medium text-primary'>Primary</div>
<Progress progress={45} color='primary' />
<div className='text-base font-medium text-secondary'>Secondary</div>
<Progress progress={45} color='secondary' />
<div className='text-base font-medium text-error'>Error</div>
<Progress progress={45} color='error' />
<div className='text-base font-medium text-success'>Success</div>
<Progress progress={45} color='success' />
<div className='text-base font-medium text-warning'>Warning</div>
<Progress progress={45} color='warning' />
<div className='text-base font-medium text-info'>Info</div>
<Progress progress={45} color='info' />
</div>
</div>
)
}
export default ProgressColorCode
API ( Progress Bar )
| Prop | Description | Type | Default |
|---|---|---|---|
progress | Sets the completion percentage of the progress bar. | number | 0 |
color | Specifies the color of the progress bar. | 'primary' | 'secondary' | 'error' | 'success' | 'nfo' | 'Default' |
size | Determines the height of the progress bar. | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
textLabel | Sets the label text displayed outside the progress bar. | string | - |
labelText | Sets the label text displayed inside the progress bar. | string | - |
labelProgress | If true, displays the progress percentage inside the bar. | boolean | false |
textLabelPosition | Positions the textLabel relative to the progress bar. | 'inside' | 'outside' | 'outside' |
progressLabelPosition | Positions the labelProgress relative to the progress bar. | 'inside' | 'outside' | 'inside' |