Progress Circle
The Avonni Progress Circle component displays a circular indicator that shows completion toward a total, making it ideal for dashboards, KPI tracking, or any scenario where you want to visualise progress at a glance.
Overview
The Progress Circle renders a ring that fills or drains as a value approaches its total. You can set the value directly as a static number, bind it to a Salesforce field, or have it computed from an aggregate query. A title and label can appear alongside the ring to give the number context.
Configuration
To configure the Progress Circle, select it on the canvas. The configuration panel opens on the right. The sections below mirror the properties in panel order.
Properties
Title
Text displayed above or below the progress circle to introduce the metric being tracked. Use Title Position to place it at the top or bottom (default: Bottom).
Label
Text displayed after the value inside the ring — useful for adding a unit such as "%" or "pts".
Value
The current progress value. Enter a static number between 0 and 100 when tracking a simple percentage, or switch to Query mode to calculate the value from a Salesforce aggregate (SUM, COUNT, AVG, MIN, or MAX of a chosen field). In query mode you can also supply a SOQL filter expression to restrict which records contribute to the value.
Total
The number that represents 100 % completion (default: 100). Change this when your value is not already a percentage — for example, set Total to 500 if your value is a raw record count. Like Value, Total supports Query mode with its own SOQL filter expression.
Variant
Controls whether the numeric value is shown inside the ring.
Standard (default)
The current value is displayed in the centre of the ring.
Value Hidden
The ring fills without showing a number inside.
Title Position
Where the title text appears relative to the ring. Options: Top, Bottom (default).
Size
Overall diameter of the progress circle. Options: X-Small, Small, Medium (default), Large, X-Large.
Thickness
Width of the ring stroke. Options: X-Small, Small, Medium (default), Large, X-Large. Available in Advanced options.
Direction
Controls which way the colour flows from the top of the ring.
Fill (default)
The ring fills clockwise as the value increases.
Drain
The ring drains counterclockwise as the value increases.
Available in Advanced options.
Alternative Text
Accessible description of the component, announced to screen readers in place of the visual indicator. Available in Advanced options.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Output Variables
The Progress Circle exposes this output variable you can reference elsewhere on the page after the component renders.
Progress State
Percentage
Number
The current progress value expressed as a number between 0 and 100.
Example: Place a text component beside the Progress Circle and bind its content to Percentage to display the exact completion figure next to the ring.
Styling
Configure the Progress Circle's appearance from the Style tab of the Edit Progress Circle panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the progress ring.
Background Color: Set the unfilled track color.
Color: Set the filled progress color.
Styles the percentage value in the center.
Color / Font Style / Font Weight: Set the value color and typography.
Styles the title text.
Color / Font Style / Font Weight / Line Clamp: Set the title color, typography, and line clamp.
Styles the label text.
Color / Font Style / Font Weight: Set the label color and typography.
Last updated
Was this helpful?