I have an SVG that sometimes takes quite a while to load because of a few images, although they're small (VGA resolution). So that viewers know they need to be patient, I want to add little loader animations behind each image.

Any proposals?

If I had more time on hand, this would be super fun to figure out. Guess it would be just a few lines of code for something simple, e.g. a rotating line.

I gave a path a class, .loader, then used CSS:

.loader {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }
    to {
        transform: rotate(359deg);
        transform-origin: 50% 50%;
    }
}

This does create an animation. Only the line does not rotate about its center. It rotates about what looks like the document's origin, so not the intended effect.

OK, solved that issue, by adding to .loader:

transform-box: fill-box;
transform-origin: 50% 50%;

Now I can do a very basic loader animation by letting a line spin.