CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
.loader {
width: 80px;
height: 80px;
}
.loader .outer-circle {
display: block;
position: absolute;
margin: 0 auto;
width: 80px;
height: 80px;
border-top: 7px solid #e74c3c;
border-bottom: 7px solid #e74c3c;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-radius: 80px;
box-shadow: 0 0 20px #e74c3c;
animation: spin .666s linear .2s infinite;
}
.loader .inner-circle {
display: block;
position: absolute;
margin: 20px 0 0 20px;
width: 40px;
height: 40px;
border-top: 7px solid #e74c3c;
border-bottom: 7px solid #e74c3c;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-radius: 40px;
box-shadow: 0 0 20px #e74c3c;
animation: spin-2 .555s linear .2s infinite;
}
.loader .inner-circle .center {
display: block;
margin: 5px 0 0 5px;
width: 30px;
height: 30px;
background-color: #e74c3c;
border-radius: 30px;
animation: pulse .777s infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin-2 {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
