<div class="loader">
<span>{</span><span>}</span>
</div>
@background-color: #4684ee;
@loader-color: #fff;
@loader-size: 30vh;
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: @background-color;
}
.loader {
color: #fff;
font-family: Consolas, Menlo, Monaco, monospace;
font-weight: bold;
font-size: @loader-size;
opacity: 0.8;
span {
display: inline-block;
animation: pulse 0.4s alternate infinite ease-in-out;
&:nth-child(odd) {
animation-delay: 0.4s;
}
}
}
@keyframes pulse {
to {
transform: scale(0.8);
opacity: 0.5;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.