Css Animation during js calcs

HTML

<div id="anim">
</div>

CSS

#anim {
    width: 2em;
    height: 2em;
    border: 40px solid #009a67;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: indicator 1s linear infinite;
    animation: indicator 1s linear infinite;
}

#anim.completed {
    border-color: red;
    border-right-color: transparent;
}


@-webkit-keyframes indicator
{
    from { -webkit-transform: rotate(0deg); }
    50%  { -webkit-transform: rotate(180deg); }
    to   { -webkit-transform: rotate(360deg); }
}

@keyframes indicator
{
    from { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    to   { transform: rotate(360deg); }
}

JavaScript

setTimeout(function() {
    var a = 0;
    for(var i = 0; i < 2000000000; i++) {
        a++;
    }
    $("#anim").addClass("completed");
}, 1000);