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

Question

我正在尝试使用 CSS（或 js，如果需要）实现 svg 图标 的行为。我的 HTML 的结构是这样的：

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

我找到这个 :

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

但是，我需要对图标进行旋转效果。我不能使用 gif 图像，因为原始图标是自定义图标。所以，我需要把 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;
}

现在，老实说，我不确定我是否正确实施了它，因为我看不到图标正在加载。当我使用 png 图像进行测试时，我看到图标正在加载；但是在使用 svg 图片后，我看不到它正在加载。您能否看一下，如果有任何问题或需要改进，请告诉我？

Fiddle Demo

Answer 1

在picture:before中添加background-size: 100%;。因为你加载的图片比盒子尺寸大。

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

animated svg loading icon until image loaded

javascript

css

svg-animate