Circle Counter

Circle Counter displays a value relative to a maximum in a circular graphic. Use it for a clearly labelled metric or progress indicator.

Add and configure Circle Counter

1. Click Add, choose Circle Counter, and place it in the container.
2. Set Content > Counter > Value and Max Value.
3. Add Prefix or Suffix where needed to explain the number.
4. Configure Design > Size, Style, and Typography.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Counter

Setting	Purpose and options	Behavior
Value	Attribute value.	Shared
Max Value	Set the numeric max value value.	Shared
Prefix	Enter the prefix.	Shared
Suffix	Enter the suffix.	Shared

Design > Size

Setting	Purpose and options	Behavior
Size	Set size. Range: 200–960.	Shared
Padding	Set padding. Range: 0–120.	Shared
Progress Bar	Set progress bar. Range: 1–200.	Shared
Background Bar	Set background bar. Range: 1–200.	Shared

Design > Style

Setting	Purpose and options	Behavior
Value Position	Inside, Outside.	Shared
Space Above	Space above and unit. When: Value Position = Outside.	Shared
Line Cap	Round, Flat.	Shared
Background	Color or supported fill.	Shared
Background Bar	Color or supported fill.	Shared
Bar Style	Color, Gradient.	Shared
Gradient > Start	Color or supported fill. When: Bar Style = Gradient.	Shared
Gradient > End	Color or supported fill. When: Bar Style = Gradient.	Shared
Color > Progress Bar	Color or supported fill. When: Bar Style = Color.	Shared

Design > Typography

Setting	Purpose and options	Behavior
Value	typography controls.	See linked controls
Prefix	typography controls.	See linked controls
Suffix	typography controls.	See linked controls

Design > Spacing

Setting	Purpose and options	Behavior
Spacing	spacing controls.	See linked controls

Troubleshooting