<a href="#" class="arrow arrow-right">Suivant</a>

.arrow {
  width: 0;
  height: 0;
  border: 2em solid transparent;
  transition: all .25s ease;
}
.arrow-right {
  border-right-width: 0;
  border-left-color: #0F71E7;
}
a.arrow {
  display: inline-block;
  overflow: hidden; /* cache le texte du lien */
}
.arrow.loading {
  border-radius: 2em;
  animation: spin 1s infinite linear;
}
.arrow-right.loading {
  border-right: 2em solid #0F71E7;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

a {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2em 0 0 -2em;
}

document.getElementsByClassName('arrow')[0].addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('loading');
}, false);