How can I code a javascript function that will add a period to the end of a string every five seconds?

Question

I am using the following code:

<div class="loading-mask" id="loading-mask" style="display: none;">
    <span>Authenticating</span>
</div>

<script type="text/javascript">
    (function() {
        document.getElementsByClassName('form')[0]
            .addEventListener("submit", function () {  
                document.getElementById("loading-mask").style.display = "block";
            }, false);
    })();
</script>

What this does is to make a Div called loading-mask visible after a user clicks submit. How can I make it so that it also displays a period after the word "Authenticating" with more periods being added at the rate of one every five seconds?

Answer 1

You can use setInterval function. More info: https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval

setInterval(function() {
    document.getElementById('loading-mask').innerHTML += '.';
}, 5000);