Counter Circles Element
The Counter Circles Element shows values as rings that fill up to a percentage when they come into view. Each circle has a short text in its center, such as the percentage itself or a word like Quality. Because the ring fills gradually, the value draws attention without the need for a full chart.
It is a visual way to show shares, skill levels or progress toward a goal. Each circle has its own filled and unfilled color, size, speed and direction, so you can place several circles next to each other and style every one separately.
In this article: How To Use · Element Options · Counter Circle Options · Tips · Related Elements · Example
How To Use The Counter Circles Element
Add the Counter Circles Element to a column and add one Counter Circle per value. In each circle set the Filled Area Percentage (1 to 100) and the Counter Circle Text shown in the center. Keep the text short, for example 85%, because it has to fit inside the ring.
Style each circle with its Filled Color and Unfilled Color, and set the Counter Size in pixels. The ring thickness and the size of the center text grow and shrink with the counter size. Show Scales adds a scale around the ring.
The filling starts when the circle comes into view; Offset of Animation on the parent element sets exactly when, and Animation Speed on each circle sets how long it takes in milliseconds. Countdown makes the ring fill counter-clockwise. The parent element itself only sets the margin, visibility and conditional rendering for the whole group.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Counter Circles. Change them there to style every Counter Circles at once.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this counter circle. |
| Offset of Animation | Controls when the animation should start. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Counter Circle Options
Each Counter Circle sets its own percentage, colors, size, scale, direction, speed and center text.
General
| Heading | Description |
|---|---|
| Filled Area Percentage | From 1% to 100%. |
| Filled Color | Controls the color of the filled in area. |
| Unfilled Color | Controls the color of the unfilled in area. |
| Counter Size | Insert size of the counter in px. for example 220. |
| Show Scales | Choose to show a scale around circles. |
| Countdown | Choose to let the circle filling move counter clockwise. |
| Animation Speed | Insert animation speed in milliseconds. |
| Counter Circle Text | Insert text for counter circle box, keep it short. |
Tips
- Values above 100 are treated as 100 and values below 0 as 0.
- The ring does not show the number by itself. Put the value into the Counter Circle Text if visitors should read it.
- Use the same Counter Size for circles that stand in one row so they line up.
- For many values or long labels, the Progress Bar Element is easier to read than a row of circles.