Double Pendulum Loader: Pure CSS Loading Animation

Double Pendulum Loader

Two linked arms swing in a restless, chaotic-looking dance while the end bob leaves a short trail. Each arm is a sum of whole harmonics, so the 4.8s loop still closes.

Also known as: chaotic pendulum animation, double pendulum animation, physics pendulum loader.

Color Size 64px Dark background

HTML

<div class="ldr-double-pendulum" role="status" aria-label="Loading">
  <span style="--i: 0"><span></span></span>
  <span style="--i: 1"><span></span></span>
  <span style="--i: 2"><span></span></span>
  <span style="--i: 3"><span></span></span>
</div>

CSS

.ldr-double-pendulum {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.2);
}
.ldr-double-pendulum::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 10);
  height: calc(var(--s) / 10);
  margin: calc(var(--s) / -20);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
}
.ldr-double-pendulum > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 20);
  height: calc(var(--s) * 0.3);
  margin-left: calc(var(--s) / -40);
  border-radius: calc(var(--s) / 44);
  transform-origin: 50% 0;
  animation: ldr-double-pendulum-upper 4.8s linear infinite;
  animation-delay: calc(var(--i) * 0.05s - 4.8s);
}
.ldr-double-pendulum > span > span {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(var(--s) * 0.26);
  border-radius: inherit;
  transform-origin: 50% 0;
  animation: ldr-double-pendulum-lower 4.8s linear infinite;
  animation-delay: inherit;
}
.ldr-double-pendulum > span > span::after {
  --d: calc(var(--s) * (0.17 - var(--i) * 0.025));
  content: "";
  position: absolute;
  bottom: calc(var(--d) / -2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--i) * 0.28);
}
/* Only the lead copy draws the rods and the middle joint; the rest are the trail. */
.ldr-double-pendulum > span:first-child,
.ldr-double-pendulum > span:first-child > span { background: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent); }
.ldr-double-pendulum > span:first-child::after {
  content: "";
  position: absolute;
  bottom: calc(var(--s) / -18);
  left: calc(50% - var(--s) / 18);
  width: calc(var(--s) / 9);
  height: calc(var(--s) / 9);
  border-radius: 50%;
  background: var(--c);
}
@keyframes ldr-double-pendulum-upper {
  0% { transform: rotate(17.2deg); }
  2.08% { transform: rotate(26.7deg); }
  4.17% { transform: rotate(34.7deg); }
  6.25% { transform: rotate(41.0deg); }
  8.33% { transform: rotate(45.5deg); }
  10.42% { transform: rotate(48.1deg); }
  12.5% { transform: rotate(49.0deg); }
  14.58% { transform: rotate(48.4deg); }
  16.67% { transform: rotate(46.5deg); }
  18.75% { transform: rotate(43.7deg); }
  20.83% { transform: rotate(40.2deg); }
  22.92% { transform: rotate(36.5deg); }
  25% { transform: rotate(32.8deg); }
  27.08% { transform: rotate(29.4deg); }
  29.17% { transform: rotate(26.5deg); }
  31.25% { transform: rotate(24.3deg); }
  33.33% { transform: rotate(22.8deg); }
  35.42% { transform: rotate(22.0deg); }
  37.5% { transform: rotate(21.7deg); }
  39.58% { transform: rotate(21.7deg); }
  41.67% { transform: rotate(21.8deg); }
  43.75% { transform: rotate(21.6deg); }
  45.83% { transform: rotate(21.0deg); }
  47.92% { transform: rotate(19.6deg); }
  50% { transform: rotate(17.2deg); }
  52.08% { transform: rotate(13.7deg); }
  54.17% { transform: rotate(8.8deg); }
  56.25% { transform: rotate(2.7deg); }
  58.33% { transform: rotate(-4.5deg); }
  60.42% { transform: rotate(-12.8deg); }
  62.5% { transform: rotate(-21.7deg); }
  64.58% { transform: rotate(-30.9deg); }
  66.67% { transform: rotate(-40.1deg); }
  68.75% { transform: rotate(-48.7deg); }
  70.83% { transform: rotate(-56.4deg); }
  72.92% { transform: rotate(-62.7deg); }
  75% { transform: rotate(-67.2deg); }
  77.08% { transform: rotate(-69.8deg); }
  79.17% { transform: rotate(-70.1deg); }
  81.25% { transform: rotate(-68.0deg); }
  83.33% { transform: rotate(-63.8deg); }
  85.42% { transform: rotate(-57.3deg); }
  87.5% { transform: rotate(-49.0deg); }
  89.58% { transform: rotate(-39.2deg); }
  91.67% { transform: rotate(-28.2deg); }
  93.75% { transform: rotate(-16.6deg); }
  95.83% { transform: rotate(-4.9deg); }
  97.92% { transform: rotate(6.6deg); }
  100% { transform: rotate(17.2deg); }
}
@keyframes ldr-double-pendulum-lower {
  0% { transform: rotate(89.9deg); }
  2.08% { transform: rotate(106.2deg); }
  4.17% { transform: rotate(103.1deg); }
  6.25% { transform: rotate(81.9deg); }
  8.33% { transform: rotate(48.5deg); }
  10.42% { transform: rotate(11.2deg); }
  12.5% { transform: rotate(-22.7deg); }
  14.58% { transform: rotate(-48.4deg); }
  16.67% { transform: rotate(-65.3deg); }
  18.75% { transform: rotate(-75.3deg); }
  20.83% { transform: rotate(-81.6deg); }
  22.92% { transform: rotate(-85.8deg); }
  25% { transform: rotate(-87.2deg); }
  27.08% { transform: rotate(-82.7deg); }
  29.17% { transform: rotate(-68.3deg); }
  31.25% { transform: rotate(-41.6deg); }
  33.33% { transform: rotate(-3.6deg); }
  35.42% { transform: rotate(40.4deg); }
  37.5% { transform: rotate(81.7deg); }
  39.58% { transform: rotate(111.0deg); }
  41.67% { transform: rotate(121.0deg); }
  43.75% { transform: rotate(109.5deg); }
  45.83% { transform: rotate(79.9deg); }
  47.92% { transform: rotate(40.4deg); }
  50% { transform: rotate(1.1deg); }
  52.08% { transform: rotate(-29.1deg); }
  54.17% { transform: rotate(-45.1deg); }
  56.25% { transform: rotate(-47.0deg); }
  58.33% { transform: rotate(-39.1deg); }
  60.42% { transform: rotate(-27.8deg); }
  62.5% { transform: rotate(-18.9deg); }
  64.58% { transform: rotate(-15.3deg); }
  66.67% { transform: rotate(-16.2deg); }
  68.75% { transform: rotate(-18.4deg); }
  70.83% { transform: rotate(-18.0deg); }
  72.92% { transform: rotate(-12.8deg); }
  75% { transform: rotate(-3.7deg); }
  77.08% { transform: rotate(5.7deg); }
  79.17% { transform: rotate(10.4deg); }
  81.25% { transform: rotate(6.7deg); }
  83.33% { transform: rotate(-5.9deg); }
  85.42% { transform: rotate(-23.8deg); }
  87.5% { transform: rotate(-40.1deg); }
  89.58% { transform: rotate(-47.2deg); }
  91.67% { transform: rotate(-39.5deg); }
  93.75% { transform: rotate(-15.8deg); }
  95.83% { transform: rotate(19.6deg); }
  97.92% { transform: rotate(58.2deg); }
  100% { transform: rotate(89.9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-double-pendulum, .ldr-double-pendulum *, .ldr-double-pendulum::before, .ldr-double-pendulum::after, .ldr-double-pendulum *::before, .ldr-double-pendulum *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Double Pendulum Loader

HTML

CSS

Customizing this loader

Similar loaders