<div class="loading"></div>
$dot-normal: 35px;
$dot-small: 5px;
$bg-normal: $dot-normal $dot-normal;
$bg-small: $dot-small $dot-small;
$color: #6c8075;
$bezier: cubic-bezier(0, 0.74, 0.65, 0.71);
body {
  height: 100vh;
  background-color: #ececec;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading {
  width: $dot-normal * 4;
  height: 100px;
  background: radial-gradient(circle, $color 50%, transparent 50%),
    radial-gradient(circle, $color 50%, transparent 50%),
    radial-gradient(circle, $color 50%, transparent 50%),
    radial-gradient(circle, $color 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: 0 50%, 0 50%, 50% 50%, 100% 50%;
  background-size: $dot-normal $dot-normal;
  animation: move 0.5s both infinite $bezier;
}
@keyframes move {
  from {
    background-position: 0 50%, 0 50%, 50% 50%, 100% 50%;
    background-size: $bg-small, $bg-normal, $bg-normal, $bg-normal;
  }
  to {
    background-position: 0 50%, 50% 50%, 100% 50%, 100% 50%;
    background-size: $bg-normal, $bg-normal, $bg-normal, $bg-small;
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.