CSS only animation?

[iyerusad]

Is there a way to use a CSS animation instead of a gif or svg?

I tried this with no luck: main.scss

img[lazy=loading] {
  display: inline-block;
  width: 84px;
  height: 84px;

  &:after {
    content: " ";
    display: block;
    width: 76px;
    height: 76px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid var(--v-primary-base);
    border-color: var(--v-primary-base) transparent var(--v-primary-base) transparent;
    animation: lds-dual-ring 1s linear infinite;
  }
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

[CapedHero]

@iyerusad Did you manage to solve your problem?

[iyerusad]

I dont think so, CSS is not my strong skill.

Looking over the code looks like just stayed with static SVG file.

Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: "/static/loading.svg",
  attempt: 1
});