Progress Circle
The Avonni Progress Circle visually represents task or process completion using a filling circular gauge.
The Progress Circle displays a circular gauge that fills as a value approaches its total. It is a compact, visually distinct alternative to a horizontal bar — well-suited for dashboards, scorecards, and KPI displays.
Overview
Use the Progress Circle when a single metric needs to stand out. The value can come directly from a Salesforce field, be calculated from a formula, or be aggregated from a query. An optional label and title provide context above and below the gauge.
Configuration
To configure it, click the component on the Flow screen. The Edit Progress Circle Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Label
Short text displayed after the value inside the circle (e.g., "pts", "%"). Helps users understand what the number represents.
Variant
Standard (default) — shows the value inside the circle. Value Hidden — hides the numeric value.
Size
Overall diameter of the circle: X-Small, Small, Medium (default), Large, or X-Large.
Thickness
Width of the ring: X-Small, Small, Medium (default), Large, or X-Large.
Direction
Which way the ring fills from the top: Fill (default, clockwise) or Drain (counterclockwise).
Value
The Value group controls what the circle displays.
Value
The current progress value. Connect to a Salesforce field, a flow variable, or use a Query to aggregate across records.
Total
The value that represents 100% completion (default: 100). Set a query here to calculate the total dynamically.
Example (Mapped): Link the circle to a "Customer Satisfaction Score" field to show the current score at a glance.
Example (Query): Use AVG on a rating field across all reviews for a product to display an aggregate score.
Title
The Title group adds a text label displayed above or below the circle.
Title
Text displayed at the top or bottom of the circle.
Title Position
Where the title appears: Top or Bottom (default).
Styling
The Style tab provides layout and element-level customization:
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.
Bar: Customize the appearance of the progress bar itself. You can change:
Bar color: Set the color of the filled portion of the circle, indicating the level of progress.
Background color: Set the color of the unfilled portion of the circle.
Value: If you choose to display the numerical progress value within the circle, you can customize its appearance including font, size, and color.
Title: Style the title text that appears above the Progress Circle. Adjust the font, size, color, and alignment to match your design.
Label: If you include a label below the Progress Circle to provide additional context, you can style its text properties (font, size, color).
Output Variables
The Progress Circle exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Progress Circle component, and pick the output variable you need.
Others
Percentage
Integer
The current progress value expressed as a number between 0 and 100.
Example: After a user completes a quiz, store the Percentage in a flow variable and display it in a later screen — "You scored {!quizScore}% — great work!"
Last updated
Was this helpful?