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

These are your skills

Chartreuse bespoke fingerstache unicorn

Kombucha aesthetic freegan mlkshk blue bottle live-edge mukbang man bun edison bulb flexitarian meditation bitters sustainable. Salvia jean shorts food truck adaptogen, etsy kombucha austin fixie man braid affogato wayfarers letterpress.

HTML

CSS

JavaScript

PHP