Most performant way to do document wide PNG animation

I've got a GIF animation that I use thoughout my site as a saving/loading icon:

Because of edges on different background colors, I'd like to change it to a PNG animation.

When I want to show a loader at this moment I only have to make sure the following span is visible:

<span class="loader"></span>

There are several ways how this span be inserted in the document: through knockout visible binding, through JS, only by stylesheets etc.

Problem

I don't want my animation code to be aware of how this span ended up visible on the document, I just want him to animate it.

Of course scanning the whole document every frame (16 fps) for potential new spans with the 'loader' class, just to know which position properties need to be animated is not quite performant.

So what would be a good performant way to do a document wide png animation?

Note that I do need to support IE8 :(