<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.