CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #34495e;
}
h1 {
text-transform: uppercase;
font-family: sans-serif;
color: #FFF;
font-size: 42px;
}
div.spin {
width: 85px;
height: 85px;
border-radius: 100%;
border: 35px solid #2980b9;
border-top-color: transparent;
border-bottom-color: transparent;
position: relative;
animation: 1s spin infinite linear alternate;
display: inline-block;
}
div.spin:before {
content: "";
display: block;
width: 85px;
height: 85px;
border-radius: 100%;
border: 35px solid #3498db;
border-left-color: transparent;
border-right-color: transparent;
position: relative;
top: -35px;
left: -35px;
animation: 2s revspin infinite linear normal;
}
@keyframes revspin {
0% { transform: rotate(0deg) }
100% { transform: rotate(-360deg) }
}
@keyframes spin {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
