Animated loader in CSS

Add animated loading icon to any HTML element by adding a "loading" class and the following css rules:

.loading::before {
    content: ' ';
    width: 1em;
    height: 1em;
    border: 0.2em solid #999;
    border-top-color: transparent;
    border-radius: 50%;
    animation: loadingspin 1s linear infinite;
}
    
@keyframes loadingspin {
    100% {
        transform: rotate(360deg)
    }
}

Demo on codepen