<div class="loader">
|<span>o</span><span>_</span><span>o</span>|<span>^</span><span>_</span><span>^</span>|<span>+</span><span>_</span><span>+</span>|
</div>
@background-color: orange;
@loader-color: #fff;
@loader-size: 20vh;
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.7;
span {
display: inline-block;
animation: pulse 0.5s alternate infinite ease-in-out;
&:nth-child(odd) {
animation-delay: 0.5s;
}
}
}
@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.