SCSS
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
cursor: default;
}
body {
background-color: rgba(204, 204, 204, 1);
}
.loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
text-align: center;
font-family: Arial, sans-serif;
font-size: 5em;
font-weight: bold;
color: transparent;
user-select: none;
white-space: nowrap;
}
.loader span {
text-shadow:
0 0 2px rgba(204, 204, 204, 0.9),
0 15px 25px rgba(0, 0, 0, 0.3),
0 -2px 3px rgba(0, 0, 0, 0.1),
0 -5px 10px rgba(255, 255, 255, 0.5),
0 5px 10px rgba(0, 0, 0, 0.3),
0 3px 4px rgba(255, 255, 255, 0.2),
0 0 20px rgba(255, 255, 255, 0.45);
animation: loading 1.20s ease-in-out infinite alternate;
}
@keyframes loading {
to {
text-shadow:
0 0 2px rgba(204, 204, 204, 0),
0 0 3px rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(255, 255, 255, 0);
opacity: 0;
}
}
@for $i from 1 through 11 {
.loader span:nth-child(#{$i}) {
animation-delay: 0.1s * $i;
}
}
