动画 svg 加载图标直到图像加载

Question

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

Answer 1

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

Answer 2

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