Rotating keyframe with static translation

Question

I have a circle that acts as a placeholder while the site is loading:

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #ff8800e3;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg) translate(-50%,-50%); }
    100% { transform: rotate(360deg) translate(-50%,-50%); }
  }

<div class="loader"></div>

The keyframe is supposed to make the circle spin around its own center, but instead it rotates and translates at the same time. I need the translation to be static so the circle stays in place while rotating.

How would I achieve that?