Note: To use this block you must have Header/Footer Scripts enabled in Appearance > Kadence (this is a pro feature). The counters don’t look like much on the backend but that’s because the content and animation are controlled via jQuery. Once you view on the front end it will look completely different.

The animation will not begin until the counters are inside the viewport.

IMPORTANT – Copy the code from the Custom HTML block below into Kadence Block Controls > Page Scripts >Custom CSS & JS > Footer on this page, then delete the Custom HTML block. This code loads the jQuery libraries required to make the counters function.

Each counter is a section inside a section within the parent row. If you want more than 3 counters in a row, add another column and then copy the inner section (named Counter) to the new section generated by the extra column. Just be aware that the more columns you have, the smaller you will need to make your counters to account for responsiveness.

Editing the counters

Each element inside the counters is named for ease. The first 4 text blocks (green backgrounds) are where you define your values. These blocks do not show on the front end so do not style them, simply enter your values and then forget about them:

Value: The number to count up to (out of 100)
Size: The dimensions of the counter (width & height)
Thickness: The thickness of the outer line (the animated progress arc)
Decimals: The number of decimal places to show

The Circle and Result blocks are dynamic and do not require input. These are locked only as a guide to remind you that you don’t have to input any text. They can still be styled:
Circle: In the block settings, the color property defines the colour of the animated arc. The background property defines the colour of the empty part of the arc. Do not edit any other settings in this block.
Result: Do not enter any text in this block, it is dynamically populated by the value in the Value block. Use the block settings to style the output as you normally would. If you are using preffix/suffix text, you can adjust the vertical space by altering the line-height value.

Prefix/Suffix Blocks:
All prefix and suffix blocks require a value to be entered (if you wish to use them). If no value is entered they will not display on the frontend. Use the block settings to style the output as you normally would. If you want to increase/decrease the horizontal space between the Symbol preffix/suffix and the outputted number, either edit the Flex align settings > Default horizontal block gap value in the Output section, or add left/right margin to the Symbol preffix/suffix blocks.

Prefix: Displays text above the animated number
Symbol prefix: Displays to the left of the animated number
Symbol suffix: Displays to the right of the animated number
Suffix: Displays underneath the animated number

The Display section controls the colour of the inner circle. Change the Display section background colour value to change the colour of the inner circle.

25.00

200

10

2

Prefix text

Prefix symbol

Suffix symbol

Suffix text

25.00

200

10

2

Prefix text

Prefix symbol

Suffix symbol

Suffix text

25.00

200

10

2

Prefix text

Prefix symbol

Suffix symbol

Suffix text