To generate loading effect.
In the below code, the box instead of traversing backwards, goes to starting position. <!DOCTYPE html> <html> <head> <title>Page Loading</title> </head> <body> <div id="container"> <div id="box"></div> <!--IN this DOM, container is the parent of the box.--> </div> </body> <style > #container{ width:500px; height: 25px; background: blue; position:absolute; left: 500px; top: 250px; } #box{ width: 25px; height: 25px; background: red; position:relative; } </style> <script> var t=setInterval(move,5);//Timer created with interval of 500mS. //var t2=setInterval(moveBack,5);//Timer to move back in the bar. var box=document.getElementById("box"); var pos=0; function move()//responsible for the movement of the box. { if(pos>=475) { //setInterval(moveBack,5); //clearInterval(t); while(pos>=0) { //pos-=1; box.style.left=pos+'px'; pos-=1; } } pos+=1; box.style.left=pos+'px'; } /*function moveBack() { if(pos<=0) { //setInterval(move,5); clearInterval(t2); pos-=1; box.style.left=pos+'px'; } */ </script> </html>
Often have questions like this?
Learn more efficiently, for free:
