0

I am trying to achieve the behavior with CSS (or js if needed) for a svg icon. The structure of my HTML is something like this:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" class="img load">
</picture>

I found this simple CSS solution:

.load {
  background: transparent url('loading-icon.svg') no-repeat center;
}

But, I need spin effect on the icon. I can't use gif image as the original icon is custom icon. So, I needed to put the icon in pseudo element:

picture:before {
  width: 50px;
  height: 50px;
  content: '';
  position: absolute;
  background: url('loading-icon.svg');
  /* top: 50%; */
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  animation: spin 2s linear infinite;
}

Now, to be honest, I am not sure I have implemented it correctly or not as I can't see the icon loading. I saw icon loading when I used png image to test; but after using svg image, I can't see it loading. Can you please take a look and let me know if there are any issues or need any improvements?

Fiddle Demo

user1896653
  • 3,247
  • 14
  • 49
  • 93
  • Does this answer your question? [Can you animate a svg "background-image"?](https://stackoverflow.com/questions/41927170/can-you-animate-a-svg-background-image) – Mehdi May 03 '21 at 10:06
  • Actually, after using solution of @Hancel, my code is working now. But, I am confused why png icon worked without this css while svg icon failed to work without it. – user1896653 May 03 '21 at 10:31

1 Answers1

1

add background-size: 100%; in picture:before. because your loading picture is bigger than box size.

Hancel Lin
  • 345
  • 2
  • 10