Quantum Sphere Loader

A parabolic spherical orbital built from CSS-rotated rings, inspired by the quantum superposition of atomic orbitals. Every ring spins in its own 3D plane and holds a superposed state until you observe it — hovering collapses that ring onto a fresh hue, glow and speed. Unlike the flat SVG spinners it is a React or Svelte component rather than a string, so it is the one loader here that reacts to the pointer.

bun i quantum-sphere-loading-iconor import it from grab-url/icons/quantum-sphere Source

Lines9Sphere size180pxLine width1.2pxGlow10Rotation8sSaturation85%Lightness60%Opacity0.75Auto-randomize colour scheme

import QuantumOrbital from 'quantum-sphere-loading-icon/react';

<QuantumOrbital
  config={{
    minLines: 9,
    maxLines: 9,
    minSphereSize: 180,
    maxSphereSize: 180,
    minLineWidth: 1.2,
    maxLineWidth: 1.2,
    minGlowIntensity: 10,
    maxGlowIntensity: 10,
    minRotationSpeed: 8,
    maxRotationSpeed: 8,
    minSaturation: 85,
    maxSaturation: 85,
    minLightness: 60,
    maxLightness: 60,
    autoRandomizeMin: 5000,
    autoRandomizeMax: 12000,
    opacity: 0.75,
  }}
  autoRandomize={true}
/>

React

// Bundled with grab-url:
import QuantumOrbital from 'grab-url/icons/quantum-sphere';
// Or standalone:
import QuantumOrbital from 'quantum-sphere-loading-icon/react';

export function Loading() {
  return (
    <div style={{ height: 400 }}>
      <QuantumOrbital autoRandomize />
    </div>
  );
}

Svelte 5

<script>
  import QuantumOrbital from 'quantum-sphere-loading-icon/svelte';
</script>

<div style="height: 400px">
  <QuantumOrbital autoRandomize={true} />
</div>

Props

Prop	Type	Default	Description
config	OrbitalSphereConfig	preset	Min/max bounds for line count, size, glow, rotation, saturation and lightness. Set a min equal to its max to pin the value instead of randomizing it.
autoRandomize	boolean	true	Re-rolls the color scheme and shifts hue every 5–12s.
className	string	""	Extra classes on the wrapper.
onSphereClick	() => void	null	Fired when the sphere is clicked.

Color schemes

With autoRandomize on, the sphere picks a new scheme every few seconds. Each one is a function mapping a ring's index to a hue, so the whole set works from a single base hue.

SingleDualRainbowRandomComplementaryTriadicAnalogousSplitTetradicMonochromaticWarmCoolNeonSunsetOceanForestGalaxyFireIceCyberpunkPastelVintageGradientElectric