23 lines
1.0 KiB
JavaScript
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
|