window.onload = function() { let m = [window.innerWidth / 2, window.innerHeight / 2]; let el = document.getElementById("loader"); let cl_w = 0.8 * m[0]; let cl_h = cl_w; let x = m[0] - cl_w; let y = m[1] - cl_h; let count = 0; const update = () => { el.style.left = x + "px"; el.style.top = y + "px"; el.style.width = cl_w + "px"; el.style.height = cl_h + "px"; } const animateRight = () => { if (x < m[0]) { x++; cl_w--; } if (x == m[0] && cl_w < 0.8 * m[0]) { cl_w++; } update(); } const animateDown = () => { if (y < m[1]) { y++; cl_h--; } if (y == m[1] && cl_h < 0.8 * m[1]) { cl_h++; } update(); } const animateLeft = () => { if (x == m[0] && cl_w > 0) { cl_w--; } if (x == m[0] && cl_w == 0) { x--; } if (x < m[0] && x > 0.2 * m[0]) { x--; cl_w++; } update(); } const animateUp = () => { if (y == m[1] && cl_h > 0) { cl_h--; } if (y == m[1] && cl_h == 0) { y--; } if (y < m[1] && y > 0.2 * m[1]) { y--; cl_h++; } } function animationHandler () { if (x < m[0] && y < m[1]) { if (count > 0) { animateUp(); } animateRight(); } if (x == m[0] && y < m[1]) { count++; animateRight(); animateDown(); } if (x == m[0] && y == m[1]) { animateDown(); animateLeft(); } if (x < m[0] && y == m[1]) { animateLeft(); animateUp(); } } setInterval(animationHandler, 5); document.getElementById("l_text").style.marginTop = 2.5 * y + cl_h + "px"; let ltsp = document.getElementsByClassName("l_text_sp"); let n = 0; function l() { if (n < 3) { ltsp[n].style.display = "inline"; n++; } else { for (let i of ltsp) { i.style.display = "none"; } n = 0; } } setInterval(() => { l(); }, 700); }

Webpage Loader