const dot = document.querySelector('.popupMainInsideWrapperBoxTopLoadingBarDot'); const container = document.querySelector('.popupMainInsideWrapperBoxTopLoadingBar'); function animateDot() { const containerWidth = container.offsetWidth; const dotWidth = dot.offsetWidth; dot.style.transition = 'transform 3s linear'; dot.style.transform = `translateX(${containerWidth + dotWidth}px)`; // Reset the animation dot.addEventListener('transitionend', () => { dot.style.transition = 'none'; // Disable transition during reset dot.style.transform = `translateX(-${dotWidth}px)`; // Move dot back to start // Force reflow to restart the animation dot.offsetHeight; // Trigger reflow dot.style.transition = 'transform 3s linear'; // Re-enable transition dot.style.transform = `translateX(${containerWidth + dotWidth}px)`; }, { once: true }); } animateDot(); setInterval(animateDot, 3000); // Repeat the animation every 5 seconds