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%"
          fill="#001f3f" />

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.