My loader spinner wasn’t spinning.

.loader-spinner {
  animation: spinLoader 600ms steps(12, end) infinite;
}

@keyframes spinLoader {
  from { transform: translate( -50%, -50% ); }
  to { transform: translate( -50%, -50% ) rotate(1turn); }
}

The problem was that the keyframes for transform need to match. Even though there’s an implicit rotate(0turn) in the transform value, it’s required to be explicit for animation keyframes.

@keyframes spinLoader {
  /* match transform values */
  from { transform: translate( -50%, -50% ) rotate(0turn); }
  to { transform: translate( -50%, -50% ) rotate(1turn); }
}

See the Pen loader spinner with CSS animation by David DeSandro (@desandro) on CodePen.