Pendulum

<!-- Pendulum (Newton's cradle) Loader -->
<div class="nuda-pendulum-loader" role="status" aria-label="Loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

/* Pendulum Loader
   Newton's-cradle style swing — end balls swing, middle balls stay still.
   Customize: --pend-color, --pend-string */

.nuda-pendulum-loader {
  --pend-color: #e4ff54;
  --pend-string: rgba(228, 255, 84, 0.3);
  display: flex;
  align-items: flex-start;
  height: 46px;
  padding: 8px;
}

.nuda-pendulum-loader span {
  display: block;
  width: 10px;
  height: 38px;
  border-top: 2px solid var(--pend-string);
  position: relative;
  transform-origin: top center;
}

.nuda-pendulum-loader span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--pend-color);
  border-radius: 50%;
}

.nuda-pendulum-loader span:first-child {
  animation: nuda-pendulum-right 1.1s cubic-bezier(0.36, 0, 0.64, 1) infinite;
  will-change: transform;
}

.nuda-pendulum-loader span:last-child {
  animation: nuda-pendulum-left 1.1s cubic-bezier(0.36, 0, 0.64, 1) infinite;
  will-change: transform;
}

@keyframes nuda-pendulum-left {
  0%, 50%, 100% { transform: rotate(0); }
  25%           { transform: rotate(-32deg); }
}

@keyframes nuda-pendulum-right {
  0%, 50%, 100% { transform: rotate(0); }
  75%           { transform: rotate(32deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-pendulum-loader span { animation: none; }
}