A lazy way to do this is with the UTF-8 entity code for a half circle \25E0
(aka ◠
), which looks like ? and then keyframe animate it. It's a simple as:
.busy
{
animation: spin 1s infinite linear;
display:inline-block;
font-weight: bold;
font-family: sans-serif;
font-size: 35px;
font-style:normal;
color:#555;
}
.busy::before
{
content:"\25E0";
}
@keyframes spin
{
0% {transform: rotate(0deg);}
100% {transform: rotate(359deg);}
}
_x000D_
<i class="busy"></i>
_x000D_