the answer for all question about Oxygen Builder plugin and WordPress

Hi everyone. I’m hoping you can help me solve a challenge customizing Oxygen’s c

Hi everyone. I’m hoping you can help me solve a challenge customizing Oxygen’s circular counter composite element.

Oxygen’s default functionality draws the donut chart based on a single percentage. I needed to have three segments for each donut chart: a ‘robust’ value in bright green, an ‘optimistic value’ in dark green, and the remaining gap in grey. I’ve successfully modified the circular counter code to add variables and update the conic-gradient with the three colors using stops that match the values (which pull from custom fields in a custom post type).

Here’s where I’m stumped: If a single donut chart is on screen, the circular counter works flawlessly. If all three donut charts are on screen, only the third circular counter animates. If I had a fourth, unaltered circular counter with Oxygen’s original code, all four donut charts animate ONLY for the first set of ‘robust’ values, not the ‘optimistic value’ and remaining gap.

Here’s an example of my modifed js code that handles the three custom donut charts (each donut chart has a repeat of this code, with the element IDs updated to match the hidden text fields that contain their values). A HUGE thank you in advance if anyone can help identify the source of my problem. I feel like it’s staring me in the face, but I’m just not seeing it.

var url_string = window.location.href;
var url = new URL(url_string);
var param = url.searchParams.get(“ct_builder”);

function startCounting( target ) {

var robustNumber = jQuery(‘#span-411-36’);
var optimisticNumber = jQuery(‘#span-414-36’);

if( !param && !‘counter-started’) ) {

var robustCount = 0;
var robustMax = parseInt(robustNumber.html());
var optimisticMax = robustMax + parseInt(optimisticNumber.html());
var optimisticCount = robustMax;
var counterSpeed = 40;

if( !‘counter-concluded’) ) {

robustNumber.attr(‘data-counter-started’, ‘true’);

var circularCounterInterval = setInterval( function() { // 2021/05/18 CHANGED

if( robustCount < robustMax ) { robustCount++; robustNumber.closest('.oxel_circular_counter').attr('style', 'background: conic-gradient(#69db1f 0% ' + robustCount + '%, #4f4f4f 0)'); } else if( optimisticCount < optimisticMax ) { optimisticCount++; robustNumber.closest('.oxel_circular_counter').attr('style', 'background: conic-gradient(#69db1f 0% ' + robustMax + '%, #26490a ' + robustMax + '% ' + optimisticCount + '%, #4f4f4f ' + optimisticCount + '% 100%)'); } else { robustNumber.attr('data-counter-concluded', 'true'); clearInterval( circularCounterInterval ); // 2021/05/18 NEW } }, counterSpeed); } } } /** Intersection Observer for Triggering On Visible **/ var numberCounters = document.querySelectorAll('.oxel_circular_counter__number'); var numberCounterOptions = { root: null, threshold: 0, rootMargin: "0px" }; var numberCounterObserver = new IntersectionObserver( function(entries, observer) { entries.forEach( entry => {

var targetIsIntersecting = entry.isIntersecting;

if( targetIsIntersecting ) {

startCounting( );

} else if( !targetIsIntersecting ) {




, numberCounterOptions );

numberCounters.forEach( section => {


  1. Darren Crabb says

    Not looked at this in any depth, but I’m suspecting it may be the .closest(‘.oxel_circular_counter’) bit that is causing only one to animate? Kind of hard to follow though without seeing the HTML structure.

  2. Budi Haryono says

    Someone report this on github still no solution

  3. Peter Bronski says

    I ended up giving up on the animated counter, and settled on modifying the code to work as static donut charts with conic gradients based on custom posts and fields. The site just flipped live today. Here it is, if anyone is interested:

Leave A Reply

Your email address will not be published.

Oxyrealm Docs