Anime Orbit Loader

<div class="aol-wrap">
  <div class="aol-dot aol-d1"></div>
  <div class="aol-dot aol-d2"></div>
  <div class="aol-dot aol-d3"></div>
</div>

.aol-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}
.aol-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
}
.aol-d1 { background: #6366f1; }
.aol-d2 { background: #a855f7; }
.aol-d3 { background: #ec4899; }

var dots = document.querySelectorAll('.aol-dot');
dots.forEach(function(dot, i) {
  var radius = 25 + i * 5;
  anime({
    targets: dot,
    translateX: function(el, idx, total) {
      return [radius, -radius];
    },
    translateY: function(el, idx, total) {
      return [0, 0];
    },
    duration: 1500 + i * 300,
    easing: 'linear',
    loop: true,
    keyframes: [
      { translateX: radius, translateY: 0 },
      { translateX: 0, translateY: radius },
      { translateX: -radius, translateY: 0 },
      { translateX: 0, translateY: -radius },
      { translateX: radius, translateY: 0 }
    ]
  });
});