The Ring Statistics Block visualises a single value by filling a circular ring proportionally. Depending on the value, the ring is partially or fully filled. The filled portion represents the value out of 100%, while the remainder shows what’s left. The value is typically displayed in the center of the ring, offering a clear and immediate snapshot of progress or status.
Adding a Ring Statistics block on a page
- Select the Statistics (Ring) block
2. Ring colour (mandatory): you can select from the drop-down selection. The drop-down options are:
- Brand light
- Brand dark
- Brand Supplementary
The background colour is automatically displayed based on the selection of Ring colour and is not configurable by content author.
Example of how each style can look respectively:
Brand light
Brand dark
Brand supplementary
Value (mandatory): you can add a whole number with or without 1 decimal place, and no greater than 100. The value will be shown as a percentage.
Description (optional): you can add a description which will display on the right-hand side of the ring.
Disclaimer (optional): you add a disclaimer which will appear at the bottom of the block.
Animation of the ring: If the stat block is above the fold, the animation will load when the user lands on the page. If it's below the fold, the animation will load when the user reaches that section of the page.
Live agency examples
You can also see how agencies have applied the component below:
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.