Progress Circle
Monitor completion with circular visuals for clear, appealing progress.
Last updated
Monitor completion with circular visuals for clear, appealing progress.
Last updated
The Progress Circle is also available as an Experience Cloud Component.
The Progress Circle is a simple yet powerful visual element that displays the progress of a task or process within your flow. It's a circular gauge that fills up as the task progresses, providing users with a clear and intuitive understanding of their progress.
You have several options for how the progress circle displays its progress:
Mapped: Directly link the progress circle to a single Salesforce field or variable. This is ideal for straightforward scenarios where a single value represents progress (e.g., percentage complete, number of tasks finished).
Advanced (Formula): Create a formula that calculates the progress value by combining multiple fields or variables. This offers more flexibility, allowing you to factor in multiple criteria (e.g., average of multiple scores, weighted progress across different tasks).
Query: Run a Salesforce query to fetch the progress value directly from your data. This is useful for aggregating data across records (e.g., showing overall project completion based on the status of individual tasks). You can use functions like AVG or MAX within your query.
You can set the Progress Circle Thickness with values like: x-small, small, medium, large and x-large.
Controls which way the color flows from the top of the ring, either clockwise or counterclockwise.
No interactions are available.
Progress Circles are a great way to represent a task or process's completion visually. Avonni provides comprehensive styling options to help you tailor the appearance.
Margin: Control the spacing around the Progress Circle to position it correctly within its surrounding elements.
Padding: Adjust the space between the progress bar and the outer edge of the circle to fine-tune the visual balance.
Border: Add and customize a border around the Progress Circle to give it more visual definition. Modify the border's style (solid, dashed, etc.), color, and thickness.
