Aqui tem um exemplo. O ponto principal é animar um *pseudo-elemento* no `:hover` da `div` pai. Assim vc evita de rodar diretamente o pai e por seguinte o filho também. Além disso no `interection-count` do `animation` vc coloca o valor de `3` para girar apenas 3x e depois parar, ou seja, 3 giros em 3 segundos *(cada gira tem 1s e como são 3 giros totaliza 3 segundos, deixei comentários no código)*. Para dar o aspecto de *spin* de *load* basta vc colocar uma das bordas com a cor transparente, eu usei `border-bottom-color: transparent;` para dar esse efeito.

[![inserir a descrição da imagem aqui][1]][1]

Segue o código da imagem acima.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 48px;
      height: 48px;
    }
    .icon::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 5px solid #000;
      border-radius: 50%;
    }
    .icon:hover::after {
      animation: gira 1s linear; /* 1s é o tempo da animação de cada giro */
      animation-iteration-count: 3; /* 3 é a quantidade de giros, 3 giros = 3 segundos */
    }
    @keyframes gira {
      0% {
        transform: rotate(0deg);
        border-bottom-color: transparent;
      }
      100% {
        border-bottom-color: transparent;
        transform: rotate(360deg);
      }
    }

      


<!-- language: lang-html -->

    <div class="icon">
      <img src="https://placecage.com/24/24">
    </div>

<!-- end snippet -->


  [1]: https://i.sstatic.net/flwpx.gif