fa-spin stops after start and the page is reloaded
<p>I add the button refresh on the page, so it resets the tic tac toe game.
But instead of rotating it starts to rotate and stops immediately.<br>
As far as I get it, <strong>refresh1.classList.add("fa-spin");</strong> add the class to an element and after that the page reloads. 
A link to the whole page is here<br>
<a href="https://codepen.io/Y-Taras/pen/rrkKWz" rel="nofollow">https://codepen.io/Y-Taras/pen/rrkKWz</a><br>
An abstract of code concerned with this question:    </p>

<pre><code>    var reset = document.getElementsByClassName('hard-reset')[0];
    reset.addEventListener('click', resetAll);
    ...
    function hideFooter() {
    for (i = 0; i &lt; tableElem.length; i++) {
        tableElem[i].innerHTML = "";
        tableElem[i].className = "";
    }
    footer.className = "hide";
}

function resetAll() {

    board = ['e', 'e', 'e', 'e', 'e', 'e', 'e', 'e', 'e'];
    hideFooter();
    var refresh1 = document.getElementById("refresh");
    refresh1.classList.add("fa-spin");}  
</code></pre>

<p>HTML part:  </p>

<pre><code>&lt;button class="hard-reset"&gt;
    &lt;i id="refresh" class="fa fa-refresh fa-2x"&gt;&lt;/i&gt;
&lt;/button&gt;
</code></pre>