const circles = document.querySelectorAll(".circle"); circles.forEach(circle => { const progress = circle.querySelector(".circle-progress"); const text = circle.querySelector(".circle-text"); const percent = +circle.getAttribute("data-percent"); const target = +circle.getAttribute("data-target"); const radius = 100; const circumference = 2 * Math.PI * radius; const offset = circumference - (percent / 100) * circumference; progress.style.strokeDasharray = `${circumference}`; progress.style.strokeDashoffset = circumference; setTimeout(() => { progress.style.strokeDashoffset = offset; }, 300); // Count animation let current = 0; const updateCount = () => { if (current target) current = target; text.textContent = target >= 1000 ? `${Math.floor(current/1000)}K+` : `${current}+`; requestAnimationFrame(updateCount); } else { text.textContent = target >= 1000 ? `${Math.floor(target/1000)}K+` : `${target}+`; } }; updateCount(); });