Progress Indicators visually display the completion status of a task or process, helping users understand how much has been completed and how much remains.
Loading...
Loading...
Loading...
Loading...
Progress semi-circles are used to visually represent the completion status of a task or process in a semi-circular format.
Progress semi-circles are used in interfaces to indicate the completion status of ongoing tasks or processes, such as loading sequences, file uploads, or progress toward goals. They offer a quick, visual representation of progress in a compact, visually distinct format that differs from traditional linear progress bars.
A progress semi-circle component displays a semi-circular indicator that fills as the task progresses. It may include optional elements like labels for additional context. The progress semi-circle can be customized to show different values, label visibility, and sizes, providing flexibility to fit various design needs.
Progress Fill: The arc or filled section that visually indicates the proportion of the task that has been completed. It grows as progress increases.
Label: A short descriptor positioned next to or inside the progress indicator, giving context about the tracked metric.
Percentage Label: Located within the center of the circle, this label displays the exact progress as a percentage.
Background: The unfilled part of the circular path that contrasts with the Progress Fill, representing the remaining portion of the task.
Use progress semi-circles to show the completion status of ongoing tasks in a semi-circular format.
Don't use progress semi-circles for tasks that do not involve progressive completion.
Ensure the progress semi-circle is large enough to be easily noticeable.
Don't make the progress semi-circle too small or difficult to see.
Label the progress semi-circle clearly to indicate what it is tracking.
Avoid using ambiguous or unclear labels for progress semi-circles.
Provide clear visual feedback as the progress semi-circle fills.
Don't leave users guessing about the status of the task.
Use consistent styling and spacing across all progress semi-circles in the application.
Don't use inconsistent styles that may confuse users.
Update the progress semi-circle in real-time as the task progresses.
Don't use progress semi-circles if you cannot provide real-time updates.
Progress circle are used to visually represent the completion status of a task or process in a circular format.
Progress circles are used in interfaces to indicate the completion status of ongoing tasks or processes, such as loading sequences, file uploads, or progress toward goals. They offer a quick, visual representation of progress in a compact and visually appealing format.
A progress circle component displays a circular indicator that gradually fills as the task progresses. It may include optional elements like labels to provide context. The progress circle can be customized to reflect different values, label visibility, and sizes to suit various design needs.
Progress Fill: The filled portion of the circular bar that visually represents the percentage of the task completed. It fills proportionally to indicate progress.
Background: The unfilled section of the circular path, providing a contrast to the Progress Fill and representing the remaining portion of the task.
Percentage Label: Centered within the circle, this label displays the completion percentage in numerical format, giving users an exact measure of progress.
Use progress circles to show the completion status of ongoing tasks in a circular format.
Don't use progress circles for tasks that do not involve progressive completion.
Ensure the progress circle is large enough to be easily noticeable.
Don't make the progress circle too small or difficult to see.
Label the progress circle clearly to indicate what it is tracking.
Avoid using ambiguous or unclear labels for progress circles.
Provide clear visual feedback as the progress circle fills.
Don't leave users guessing about the status of the task.
Use consistent styling and spacing across all progress circles in the application.
Don't use inconsistent styles that may confuse users.
Update the progress circle in real-time as the task progresses.
Don't use progress circles if you cannot provide real-time updates.
Progress bars are used to visually indicate the progression of a task or process.
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.
Expectation Levels Progress Bar visually represents stages of achievement or quality standards, helping users track their progress toward meeting defined goals.
The Expectation Levels Progress Bar visually represents a user's progression toward specific achievement levels or benchmarks. It provides feedback on current progress, motivating users and guiding them toward completing all steps or reaching all set goals.
Use the Expectation Levels Progress Bar in applications where tracking progress toward specific milestones or goals is important, such as completing onboarding tasks, reaching skill levels, or meeting performance benchmarks. It’s ideal for interfaces that encourage users to reach incremental achievements.
The Expectation Levels Progress Bar displays progress through segmented levels or stages, with each segment representing a specific milestone. As users advance, the bar fills up to show their proximity to the next level or the completion of all stages. This component enhances user engagement by offering a clear visual of goals and progress, motivating users to achieve each level.
Label: Displays the status or expectation level of the progress. In this example, it is labeled as "Met Expectation," indicating the status being represented.
Filled Bar: Shows the portion of the bar that has been completed or that meets the specified expectations. The filled sections indicate achieved progress or met criteria.
Unfilled Bar: Represents the remaining portion of the bar that has not yet been reached or that does not meet the specified expectations. It shows what is left to achieve.
Use clear labels or tooltips to describe each level, helping users understand their progress.
Don’t overcrowd the progress bar with excessive details; keep it simple and easy to read.
Ensure the progress bar has a smooth animation for progress changes to enhance visual feedback.
Don’t update progress abruptly or without visual cues, as this can confuse users.
Use a distinct color or style to highlight completed levels and the current level.
Don’t rely solely on color to indicate progress; add text labels for accessibility.
