| title | description |
|---|---|
React Progress Bar - Flowbite |
The progress bar component is used to show the completion rate of a given task in the form of a filled bar where you can also add a label indicating percentage |
Use the progress bar component from Flowbite React to show the percentage and completion rate of a given task using a visually friendly bar meter based on multiple styles and sizes.
Choose one of the examples below for your application and use the React props to update the progress fill rate, label, sizing, and colors and customize with the classes from Tailwind CSS.
To start using the progress bar component make sure you import it first from Flowbite React:
import { Progress } from "flowbite-react";Use this example to show a progress bar where you can set the progress rate using the progress prop from React which should be a number from 1 to 100.
Use this example to show a progress bar with a label. You can set the label text using the textLabel prop and the progress text using the labelText prop.
This example shows how you can position the label text inside the progress bar by using the React props called progressLabelPosition and textLabelPosition on the <Progress> component in React.
The size prop from React can be used on the <Progress> component to set the size of the progress bar. You can choose from sm, md, lg and xl.
Set your own custom colors for the progress bar component by using the color prop from React and the utility classes from Tailwind CSS.
Use this Circular progress example to show a progress bar where you can set the progress rate using the progress prop from React which should be a number from 1 to 100.
Use this Circular progress example to show a progress bar with a label. You can set the label text using the textLabel prop and the progress text using the labelText prop.
To learn more about how to customize the appearance of components, please see the Theme docs.