JSFiddle - React, Tailwind, and code Playground

HTML

<div id="primaryContainer"> <a class="btn_join_small" href="#" style="float: left;">
            <img class="loading_arrow" src="http://img.prntscr.com/img?url=http://i.imgur.com/xhMzpPS.png" />
        </a>
<br><br><br>
    <br><br>
    <br><br>
    <br><br>

<p id="var">0</p>
        <p id="text"></p>

</div>

CSS

#primaryContainer {
    width:100px;
    margin:0 auto;
}

.loading_arrow {
    width: 150px;
    margin: 0 auto;
    margin-top: 13px;
    margin-left: 42%;
    -webkit-animation: rotation 1s infinite linear;
    -moz-animation: rotation 1s infinite linear;
    -o-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
}

#var {
   text-align:center;
   font-family:helvetica;
    font-size:25px;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}
@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(359deg);
    }
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

JavaScript

var counter = 0;
var value = 1;
var spin = document.getElementById("var");
var lol = document.getElementById("text");

setInterval(function () {
    counter += value;
    spin.innerHTML = counter;

}, 1000);

if (counter > 10) {
    lol.innerHTML = "WOW YOU REALLY LOVE KEVIN XO"
}