Simple CSS Spinner

Just another very simple CSS-based spinner that requires one element.

by Marc Cots Navarro

HTML

<div class='spinner large'></div>

CSS

.large {
    border-width: 10px;
    height: 100px;
    width: 100px;
}

.spinner {
    animation: rotate 2s infinite ease-in-out;
    border-style: solid;
    border-bottom-color: #000000;
    border-right-color: #4F4F4F;
    border-top-color: #AFAFAF;
    border-left-color: #E5E5E5;
    border-radius: 50%;
    margin: 20px;
    position: relative;
}
.spinner:before, .spinner:after {
    background: #fff;
    content: '';
    display: block;
    position: absolute;
    left: 50%;
}


@keyframes rotate { to { transform: rotate(360deg); } }