How to animate rotation of an image inside input control?

Question

Based on this answer, I managed to put an image as my icon appearing inside an INPUT control at its right edge. If I use a GIF that rotates, I'm all set. I only need to set the class on my control and it is "progressing".

input.busy {
  background-image: url(...);
  ...
}

However... Now, I want to control the pace of the rotation, so I need to actually animate the image. I can do that as shown in this blog, which works for many, but not all, elements. And my INPUT is one of the unfortunate exceptions.

div::after {
  content: "this shows";
  background-image: url(...);
}

input::after {
  content: "this shows not";
  background-image: url(...);
}

How can I rotate (in fact, animate the rotation) of an image (let's say PNG) that will reside at the rightmost edge of an INPUT tag?

Answer 1

I would use a container containing an image and an input. Put the image on top of the input and add a .loading class to the container whenever you want to show the animated image.

There is no need to use a GIF.

If you're going to use this setup in several places, I suggest making a custom element out of it.

.input-container {
  display: inline-grid;
  place-items: center end;
}

.input-container > * {
  grid-row: 1;
  grid-column: 1;
}

.input-container > img {
  display: none;
  border-radius: 50%;
  animation:spin 4s linear infinite;
}

.input-container.loading > img {
  display: inline-block;
}


@keyframes spin { 
  100% { 
    transform:rotate(360deg); 
  } 
}

<div class="loading input-container">
  <input />
  <img src="https://picsum.photos/id/200/20">
</div>