Show User that Page is Loading using dots (...)
$(document).ready(function(){

    var interval;

    function startIndicator(){
        stopIndicator();

        dotCount = 1;

        interval = setInterval(function(){

            $("#dots").text('.'.repeat(dotCount));

            dotCount++;
            if(dotCount &gt; 3){
                dotCount = 0;
            }

        },1000);
    }

    function stopIndicator(){
        clearInterval(interval);
        dotCount = 0;
        $("#dots").text('');
    }



    $("#run").click(startIndicator);

    $("#stop").click(stopIndicator);

});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="progress"&gt;Authenticating&lt;span id="dots"&gt;&lt;/span&gt;&lt;/div&gt;
&lt;hr&gt;
&lt;button id="run"&gt;
    Run It
&lt;/button&gt;
&lt;button id="stop"&gt;
    Stop
&lt;/button&gt;




This improves:


Original code allowed multiple timers set causing issues
String "Authenticating" not repeated and confined to HTML
Slightly cleaner conditions
Renamed countdown to indicator because it's not really a countdown
WARNING: .repeat maybe only works in quite modern browsers


Note: If you want to hide the "Authentication" text as well, just add CSS to hide the .progress div where appropriate.

One alternative approach that will probably give less and simpler code, at the cost of user's CPU, is to make the dots update all the time and simply toggle the visibility of #dots or .progress.