counters

We’ve included best practices, pro tips and examples, along with the templates. The text that exists outside of the brackets is also meant to serve as a foundation for writing your emails. We encourage you to add, delete, or change any of the pre-written sections to ensure a consistent and accurate brand experience for your customers.

https://brandandbuildtemplates.me/kadence-cloud/category/counters/

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.

Note: To use this block you must have Header/Footer Scripts enabled in Appearance > Kadence (this is a pro feature).

The animation will not begin until the skill bars 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 sets an observer on the skillbars so they only animate once they are inside the viewport.

Each skillbar is made up of 2 sections inside a section within the parent section. If you want more than 4 skillbars simply duplicate one of the bar# sections.

Editing the skillbars

The first section inside each bar# contains a Count Up block. Edit the Ending Number in this block (and the title) .
The second section inside each bar# contains a Spacer/Divider block. Edit the Divider Width to match the number in your Count Up block.

That's all you need to do, but here's some more info...

The background colour of the bar is controlled by the Spacer/Divider section background settings
The colour of the bar is controlled by the Spacer/Divider color

There is a variable at the top of the CSS in the Custom CSS toggle of the parent row:

:root {
--bb-skillbars-1-speed: 2s;
}

This controls the duration of the bar animation. You can increase or decrease to make the animation faster or slower (examples: 2.5s or 500ms)
Generally, you'll want the value to be slightly less than the Animation Duration you set in the Count Up blocks

Note: Each skillbar is made up of 2 sections inside a section within the parent section. If you want more than 4 skillbars simply duplicate one of the bar# sections.

Editing the skillbars

The first section inside each bar# contains a Count Up block. Edit the Ending Number in this block (and the title) .
The second section inside each bar# contains a Spacer/Divider block. Edit the Divider Width to match the number in your Count Up block.

That's all you need to do, but here's some more info...

The background colour of the bar is controlled by the Spacer/Divider section background settings
The colour of the bar is controlled by the Spacer/Divider color