Particle Swarm Loader — Randomized Orbiting Particles in HTML CSS JS

<div class="ps-stage">
  <div class="ps-field" id="psField" role="status" aria-label="Loading"><div class="ps-core"></div></div>
  <p class="ps-hint">12 particles, each with its own radius, speed, and phase</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#07070f;color:#8b90ab;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.ps-stage{display:flex;flex-direction:column;align-items:center;gap:18px}
.ps-field{position:relative;width:220px;height:220px}
.ps-core{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#818cf8);box-shadow:0 0 22px 4px rgba(129,140,248,.7)}

.ps-particle{position:absolute;top:50%;left:50%;border-radius:50%;will-change:transform,opacity}

.ps-hint{font-size:12px;color:#5b6083}

var field = document.getElementById('psField');
var COUNT = 12;
var colors = ['#818cf8', '#22d3ee', '#f472b6', '#34d399', '#fbbf24'];
var particles = [];

// Give every particle genuinely randomized orbit parameters — radius, angular
// speed, phase offset, and vertical eccentricity — instead of evenly spacing
// identical orbits. This is what turns a ring of dots into a swarm.
for (var i = 0; i < COUNT; i++) {
  var el = document.createElement('div');
  el.className = 'ps-particle';
  var size = 4 + Math.random() * 6;
  el.style.width = size + 'px';
  el.style.height = size + 'px';
  el.style.background = colors[i % colors.length];
  el.style.boxShadow = '0 0 ' + (size * 1.6) + 'px ' + colors[i % colors.length];
  field.appendChild(el);

  particles.push({
    el: el,
    radius: 30 + Math.random() * 80,          // per-particle orbit radius
    speed: (0.4 + Math.random() * 1.4) * (Math.random() < 0.5 ? -1 : 1), // rad/s, mixed direction
    phase: Math.random() * Math.PI * 2,        // per-particle start angle
    eccentricity: 0.55 + Math.random() * 0.45, // flattens the orbit into an ellipse
    baseOpacity: 0.45 + Math.random() * 0.55,
  });
}

var start = null;
function tick(ts) {
  if (!start) start = ts;
  var elapsed = (ts - start) / 1000;
  particles.forEach(function (p) {
    var angle = p.phase + elapsed * p.speed;
    var x = Math.cos(angle) * p.radius;
    var y = Math.sin(angle) * p.radius * p.eccentricity;
    // Particles nearer the "front" of their ellipse (larger sin) appear
    // slightly bigger and brighter, faking depth without a 3D engine.
    var depth = (Math.sin(angle) + 1) / 2;
    var scale = 0.7 + depth * 0.6;
    p.el.style.transform = 'translate(' + x.toFixed(2) + 'px,' + y.toFixed(2) + 'px) scale(' + scale.toFixed(2) + ')';
    p.el.style.opacity = (p.baseOpacity * (0.5 + depth * 0.5)).toFixed(2);
    p.el.style.zIndex = String(Math.round(depth * 100));
  });
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);