<div class="Animation">
  <div class="Animation-frames">
    <span class="Animation-frame">—</span>
    <span class="Animation-frame">\</span>
    <span class="Animation-frame">|</span>
    <span class="Animation-frame">/</span>
  </div>
</div>

<a href="https://muffinman.io/css-only-frame-animations/" target="_blank">Read the blog post</a>

$time: 500ms;
$number-of-frames: 4;
$frame-duration: $time / $number-of-frames;

@keyframes frame-animation {
  100% {
    transform: translateX(-100%);
  }
}

.Animation {
  margin: 0 auto;
  max-width: 100px;
  overflow: hidden;
  font-size: 50px;
  margin-bottom: 20px;
}

.Animation-frames {
  animation: frame-animation $time infinite;
  animation-timing-function: steps($number-of-frames);
  display: flex;
  width: $number-of-frames * 100%; 
}

.Animation-frame {
  display: block;
  width: 100% / $number-of-frames;
  max-width: 100% / $number-of-frames;
  flex-basis: 100% / $number-of-frames;
}


//////////////////////////////////////////////
// Typography
//////////////////////////////////////////////
body {
  background: #f4f5fa;
  padding: 50px 20px;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  text-align: center;
}

a {
  font-size: 14px;
  color: #999;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  transition: all 250ms;
  
  &:hover {
    color: #777;
    border-bottom: 1px solid #555;
  }
}