Progress Bar
Progress bars are used to visually indicate the progression of a task or process.
Last updated
Progress bars are used to visually indicate the progression of a task or process.
Last updated
Progress bars are used in interfaces to indicate the completion status of a task or process, such as file uploads, form submissions, or loading sequences. They offer immediate visual feedback, helping users understand the current progress and how much remains to be completed.
A progress bar component displays a visual indicator, typically a horizontal bar that fills as the task advances. It may include optional elements, like labels, to add context about the progress. The progress bar can be customized with different themes, label positions, and progress values to suit the application's needs.
component_mode
An optional prop that can be used to apply a specific mode or style to the progress bar. It allows for dynamic changes to the appearance or behavior of the component based on the mode.
string
custom_class
A string of one or more CSS classes to apply to the outer container of the progress bar. This allows for easy customization and styling of the component.
string
progress
This prop controls the progress percentage of the progress bar. It expects a number between 0 and 100, representing the current completion level of the progress bar.
number
show_percentage_text
If set to true, the percentage text will be displayed within the progress bar, showing the current progress value as text.
boolean
tooltip
Determines whether to show a tooltip with the progress percentage on hover. If set to true, a tooltip will appear displaying the current progress percentage.
boolean
tooltip_position
Specifies the position of the tooltip relative to the progress bar. It can be either 'top' (above the progress bar) or 'bottom' (below the progress bar).
"bottom" | "top"
Progress Fill: Represents the portion of the task or service status that has been completed, filled proportionally to the progress made. It visually indicates the extent of completion in the process.
Background Bar: The unfilled part of the progress bar that provides a reference for the remaining progress. It contrasts with the progress fill to show the current status effectively.
Percentage Label: Displays the exact percentage of the progress, providing users with a clear numerical representation of completion.
Use progress bars to show the completion status of ongoing tasks.
Don't use progress bars for static or non-progressive tasks.
Ensure the progress bar is large enough to be easily noticeable.
Don't make the progress bar too small or easy to overlook.
Label the progress bar clearly to indicate what it is tracking.
Avoid using ambiguous or unclear labels for progress bars.
Provide clear visual feedback as the progress bar fills.
Don't leave users guessing about the status of the task.
Use consistent styling and spacing across all progress bars in the application.
Don't use inconsistent styles that may confuse users.
Update the progress bar in real-time as the task progresses.
Don't use progress bars if you cannot provide real-time updates.
