SCSS
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background-color: #222;
overflow: hidden;
}
.loader {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
box-shadow: 0 0 5px #444;
display: flex;
justify-content: center;
align-items: center;
.fa {
z-index: 2;
font-size: 50px;
color: #444;
animation: pulse 1s linear infinite;
}
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(lime, black 60%);
animation: spin .5s infinite linear;
}
&:after {
content: "";
position: absolute;
width: 95%;
height: 95%;
top: 2.5%;
left: 2.5%;
background-color: #222;
border-radius: 50%;
box-shadow: inset 0 0 5px #444;
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0% { color: lime; }
100% { color: #444; }
}
