I'm trying to show to the user that the page is reading/loading by creating an animation of dots.
Here is the HTML:
<div id="dot">Authenticating</div>
<hr>
<button id="run">
Run It
</button>
<button id="stop">
Stop
</button>
And here is the script:
$(document).ready(function(){
var interval;
function countdown(){
counter = 1;
interval = setInterval(function(){
if(counter > 0 && counter < 4){
$("#dot").append('.');
} else {
counter = 0;
$("#dot").text('Authenticating');
}
counter += 1;
},1000);
}
$("#run").click(function(){
countdown();
})
$("#stop").click(function(){
$("#dot").text('Authenticating');
clearInterval(interval);
})
})
Any better way to implement it?
Check fiddle here.