Atom Loader
A glowing nucleus with three tilted elliptical orbits and an electron racing around each. Two nested translate animations with sine easing trace every ellipse.
Also known as: atom spinner, electron orbit loader, science loader.
HTML
<div class="ldr-atom" role="status" aria-label="Loading"> <span><span><span></span></span></span> <span><span><span></span></span></span> <span><span><span></span></span></span> </div>
CSS
.ldr-atom {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
}
.ldr-atom::before {
content: "";
position: absolute;
inset: 39%;
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 calc(var(--s) / 8) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
animation: ldr-atom-core 1.2s ease-in-out infinite;
}
.ldr-atom > span {
position: absolute;
top: 33%;
left: 0;
width: 100%;
height: 34%;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
border-radius: 50%;
}
.ldr-atom > span:nth-child(2) { transform: rotate(60deg); }
.ldr-atom > span:nth-child(3) { transform: rotate(-60deg); }
.ldr-atom > span > span {
position: absolute;
top: 50%;
left: 50%;
animation: ldr-atom-x 0.6s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-atom > span > span > span {
position: absolute;
width: calc(var(--s) / 8);
height: calc(var(--s) / 8);
margin: calc(var(--s) / -16);
border-radius: 50%;
background: var(--c);
animation: ldr-atom-y 0.6s cubic-bezier(0.37, 0, 0.63, 1) -0.3s infinite alternate;
}
.ldr-atom > span:nth-child(2) > span { animation-delay: -0.4s; }
.ldr-atom > span:nth-child(2) > span > span { animation-delay: -0.7s; }
.ldr-atom > span:nth-child(3) > span { animation-delay: -0.8s; }
.ldr-atom > span:nth-child(3) > span > span { animation-delay: -1.1s; }
@keyframes ldr-atom-x {
from { transform: translateX(calc(var(--s) * -0.5)); }
to { transform: translateX(calc(var(--s) * 0.5)); }
}
@keyframes ldr-atom-y {
from { transform: translateY(calc(var(--s) * -0.17)); }
to { transform: translateY(calc(var(--s) * 0.17)); }
}
@keyframes ldr-atom-core {
0%, 100% { transform: scale(0.8); }
50% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-atom, .ldr-atom *, .ldr-atom::before, .ldr-atom::after, .ldr-atom *::before, .ldr-atom *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.