Use can easily achieve this using simple CSS keyframes. I've create a class called icn-spinner, assuming that it will contain icon. This class has animation called icn-spinner and will rotate 2 times. You can make it infinite if you want. Just replace 2 with keyword infinite.

$(document).ready(function() {
  $('.js-spin').click(function() {
    $(this).addClass('icn-spinner') //remove class to stop animation
  });
});

i {
  font-size: 40px;
}

.icn-spinner {
  animation: spin-animation 0.5s infinite;
  display: inline-block;
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="js-spin"> ♠ Click </i>

You can achieve this using javascript/jquery with CSS. Javascript/ Jquery is needed to toggle the class of the 'i' element having the icon. Below is the complete solution.

Here is the HTML code that you provided:

<div class='form-group col-xs-12 col-sm-5 col-md-5'>
    <label for='captcha-code'>Captcha Code: </label>
    <span id='captcha-text'></span>
    <i class='captcha-refresh icon-spinner9 pointer'></i>
</div>

Jquery code to add the class 'icn-spinner' on click of the element having 'js-spin' class in its class-list. Here for this, you need to import jquery in your project.

$(document).ready(function() {
    $('.js-spin').click(function() {
        $(this).addClass('icn-spinner') //remove class to stop animation
    });
});

Here is the code for CSS styling. Without 'animation-timing-function' the spinner will rotate but it will be not linear. The animation starts at 0deg and ends at 360deg.

i {
    font-size: 40px;
}

.icn-spinner {
    animation: spin-animation 1s infinite;
    animation-timing-function: linear;
    display: inline-block;
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}