JSFiddle - React, Tailwind, and code Playground

by MatTheCat

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a href="#" class="arrow arrow-right">Suivant</a>

CSS

.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;
    animation-fill-mode: backwards;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.arrow-right.loading {
    border-right: 2em solid #0F71E7;
}

JavaScript

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