<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.