Progress
Adding and styling progress parts - linear and radial.
Last updated
Was this helpful?
Adding and styling progress parts - linear and radial.
Last updated
Was this helpful?
Progress parts can be used to show the progress of a task or to show the passing of time.
When Used: These are used to show the progress of tasks that have a known duration, such as file uploads, downloads, or installations.
Why Used: To give users an estimate of how much longer the task will take.
Usefulness: They help manage user expectations and improve user experience by making the wait time more tolerable.
Progress parts can also be used as fixed parts to represent statistics or present information. Progress parts can convey data and metrics in a clear and engaging way.
Linear progress indicators display progress along a straight line, typically a horizontal bar. They are often used for tasks that have a clear start and end point and progress in a single direction.
Locations in the Parts Library: Base Parts > Feedback > Progress
Sequential Tasks: When a task progresses in a sequential manner. For example, loading a page, uploading a file, or completing a multi-step form.
Horizontal Layouts: When the design or layout naturally supports horizontal elements. For example, a progress bar at the top of a survey page indicating progress through questions.
Continuous Processes: For processes where progress is continuous and linear. For example, a loading bar showing the percentage of a webpage loaded.
Use linear progress bars to show:
completion rates for tasks or milestones.
progress towards goals, such as fundraising targets or project stages.
Radial progress indicators display progress along a circular path. They are often used for tasks where progress can be represented as part of a whole or for more visually engaging progress displays.
Locations in the Parts Library: Base Parts > Feedback > Radial Progress
Circular or Central Elements: When the design supports or requires circular elements. For example, a fitness app displaying daily activity progress
Short Tasks: For tasks that are quick or brief, providing a more visually engaging way to show progress. For example, showing progress in a timer or countdown.
Center-Focused Design: When you want to draw attention to the center of the interface or emphasize the progress visually. For example, a dashboard showing various metrics with radial progress indicators around central statistics.
Tasks with Undefined Start/End Points: When progress doesn’t necessarily have a clear start and end point but is more about the portion of the task completed. For example, tracking goals or quotas where completion is more about reaching a certain threshold.
Use radial progress to show:
statistics like user engagement, completion rates, or satisfaction scores.
performance metrics like uptime, or usage statistics.
Linear and radial progress parts are added and styled in the same way.
If you want a progress part within your content to display statistics, then choose the progress part most closely aligned with what you need from the Parts Library. Select the part where you’d like to add the progress part and click ‘+ add to page’.
The value of the progress is changed by selecting the value property in the right property editing panel, and entering the value (between 0-100).
Add a row or container underneath your content requiring a progress indicator. Then add the relevant progress part from the parts library. Removing the value will mean that the progress is indeterminate, meaning that it will keep cycling until fully loaded.
To make your progress visible only when loading, select the container housing the progress part, then go to 'Visibility' in the right property editing panel. Choose "is-loading". You will notice that your progress part and its container are no longer visible. They will only be visible in the event that your content is in the process of loading.
More information on progress parts is coming soon.
Like many other parts, , , , , and can be applied using the property editor on the right, once the progress part has been selected.
Skeleton
Loading
Customizing and formatting
