Web Development
Here goes your text Select any part of your text to access the formatting toolbar





document.addEventListener("DOMContentLoaded", function () {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const fill = entry.target;
const target = parseInt(fill.getAttribute('data-percent'));
const percentText = fill.querySelector('.percent');
let current = 0;
// Animate fill
fill.style.width = target + "%";
// Animate number count slowly
const duration = 3455; // slow speed = 4 seconds
const stepTime = Math.floor(duration / target);
const interval = setInterval(() => {
if (current >= target) {
clearInterval(interval);
} else {
current++;
percentText.textContent = current + "%";
}
}, stepTime);
observer.unobserve(fill);
}
});
}, {
threshold: 0.5
});
document.querySelectorAll('.progress-fill').forEach(fill => {
observer.observe(fill);
});
});