sigit_design/assets/js/loadingBarAnimation.js

23 lines
1.0 KiB
JavaScript

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