FREE block. Displays a ring-shaped SVG gauge filled to the percentage of the fundraising goal that has been reached, with the percentage number in the center.
Why use this
The circular gauge is a visual alternative to the horizontal progress bar. It works well in compact card layouts and sidebars where a wide bar would not fit cleanly.
What it does
The block generates an inline SVG with two circles: one for the track and one for the filled arc. The arc length is calculated from the percentage using stroke-dasharray and stroke-dashoffset. A gradient is applied to the arc using the same global Appearance color settings as the Progress Bar. The percentage number is rendered as centered SVG text.
When strokeWidth or fontSize are left at 0, the block auto-calculates sensible values based on the overall size attribute (strokeWidth = max(8, size/15), fontSize = size/3).
The block supports Query Loop context, so it can be used in archive grids.
How to use it
- Add the Circular Progress block from the Fundations category.
- Set the overall size in pixels using the Size option.
- Leave stroke width and font size at 0 for automatic sizing, or enter specific values.
- To hide the percentage number inside the ring, toggle Show Percentage off.
- To change the ring color, go to Settings > Fundations > Appearance.
Settings and options
| Option | Type | Default | Description |
|---|---|---|---|
| Size | number | 120 | Total SVG diameter in pixels |
| Stroke width | number | 0 | Ring thickness in pixels; 0 = auto (max(8, size/15)) |
| Font size | number | 0 | Center text size in pixels; 0 = auto (size/3) |
| Font weight | number | 0 | Center text weight; 0 = auto (700) |
| Show percentage | boolean | true | Display the percentage number inside the ring |
Ring gradient colors are controlled globally at Settings > Fundations > Appearance (get_fund_progress_color, get_fund_progress_color_end).
What you can and cannot do
- You can control the size, stroke thickness, and whether the percentage is shown.
- You cannot set the ring color per block. All circular progress blocks share the global gradient.
- The block does not expose an output filter.
- The block shows nothing meaningful on non-action pages unless demo mode is active.
Troubleshooting
Ring appears but shows 0%: The action’s goal or raised amount is missing. Check the action’s meta in the admin.
Ring gradient does not change: Colors are set at Settings > Fundations > Appearance, not in the block.
Text looks too large or too small: Set explicit values for Font size and Stroke width rather than relying on auto-calculation.