Cacher is the code snippet organizer for pro developers

<div class="nav-toggle">
  <div class="dots top">
    <div class="left dot"></div>
    <div class="center dot"></div>
    <div class="right dot"></div>
  </div>
  <div class="dots middle">
    <div class="left dot"></div>
    <div class="center dot"></div>
    <div class="right dot"></div>
  </div>
  <div class="dots bottom">
    <div class="left dot"></div>
    <div class="center dot"></div>
    <div class="right dot"></div>
  </div>
</div>

//Make sure this loads after the DOM elements!
let dots = document.querySelectorAll('.dot'),
    interval = 500;

setInterval(function() {
  for (let j = 0; j < dots.length; j++) {
    const dot = dots[j],
          colorNumber = Math.floor(Math.random() * 360),
          timeout = Math.floor(Math.random() * 1000);
    if (colorNumber > 360) { colorNumber = 360; }
    setTimeout(function() {
      dot.style.backgroundColor = `hsl(${colorNumber},100%,50%)`;        
    }, timeout);
  }
}, interval);

$dot-size: 9px;

.nav-toggle {
  border-radius: 3px;
  bottom: 30px;
  height: 39px;
  position: absolute;
  right: 15px;
  width: 36px;
}
.dots {
  height: 33%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;

  &.top {
    top: 0;
  }
  &.middle {
    top: 50%;
    transform: translate(-50%,-50%);

  }
  &.bottom {
    bottom: 0;
  }
}
.dot {
  background-color: hsla(0,0%,0%,0);
  border-radius: 100%;
  height: $dot-size;
  position: absolute;
  top: 50%;
  transition: all 1500ms;
  transform: translate(0, -50%);
  width: $dot-size;

  &.left {
    left: 0;
  }
  &.center {
    left: 50%;
    transform: translate(-50%,-50%);
  }
  &.right {
    right: 0;
  }
}