Triangle CSS comme indicateur de chargement

CSS permet d'afficher des triangles sans aucune image grâce aux bordures d'un élément de dimensions nulles, comme expliqué ici et mis en application .
Un cas courant est l'utilisation dans un lien d'un triangle comme une flèche (pour une pagination par exemple). Si la navigation est dynamique il est approprié de prévenir l'utilisateur que son action a eu un effet en affichant par exemple un preloader le temps du chargement.

Que diriez vous de combiner les deux ?

Partons du code d'un triangle pointant vers la droite :

<a href="#" class="arrow arrow-right">Suivant</a>  
.arrow {
    width: 0;
    height: 0;
    border: 2em solid transparent;
}
.arrow-right {
    border-right-width: 0;
    border-left-color: #0F71E7;
}
a.arrow {  
    display: inline-block;
    overflow: hidden; /* cache le texte du lien */
}

On supprime la bordure du côté vers lequel pointe la flèche, puis on colore le côté opposé.

Prévoyons maintenant une classe loading qui sera ajoutée au clic.
Pour transformer notre flèche commençons par afficher la bordure supprimée et arrondissons le tout en prévision de la suite.

.arrow.loading {
    border-radius: 2em;
}
.arrow-right.loading {
    border-right: 2em solid #0F71E7;
}

Reste à faire tourner !

.arrow.loading {
    border-radius: 2em;
    animation: spin 1s infinite linear;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

Et voilà un indicateur de chargement pour la modique somme de quelques lignes CSS, profitez-en !