How simple can a spinner be, and still be devoid of hacks? Let's see:

Markup in a Vue component, using v-if to hide and show:

<svg v-if="inProgressCount > 0" height="3em" width="3em" class="spinner">
  <circle cx="50%"
          cy="50%"
          r="1em"
          stroke="black"
          stroke-width="0.1em"
          fill="#001f3f" />
</svg>

The CSS to create the animation, and "pin" it so that it's always visible:

svg.spinner {
    position: fixed;
    left: 0px;
    top: 0px;
}

svg.spinner circle {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        fill: #001f3f;
    }

    50% {
        fill: #ff4136;
    }

    100% {
        fill: #001f3f;
    }
}

The only thing that I don't understand here is why it's necessary to list duplicate fill values for 0% and 100%. That's needed to create a proper loop. Answers on a postcard.