Make a loading icon with static PNG

Question

I was planning to make a loading icon with PNG on HTML using Javascript..
What i mean, is not embedding a GIF..

I found loading animated png but it refering to http://www.ajaxload.info/
It using GIF..

I got this idea when once, GMail using this method, I inspect-element it..
It using a PNG with about 10 gear-like inside the image..
Each other are the same gear but with some degree of rotation difference..

When the chat is sending, it show a loading icon, the gear, but it was a single gear that moving, rotating...

I wonder how to do this..
I really want to avoid using GIF at all..

EDIT:

I got what i want at http://devthought.com/wp-content/projects/mootools/APNG/Demo/
At "Pre-existing DIV element (single image), with per-frame intervals" section.. thanks for the answers

Answer 1

As it's now 2022 I'll change to: CSS3 Animations with an example found here: https://flaviocopes.com/rotate-image/ and the code provided below.

.rotate {
  animation: rotation 8s infinite linear;
}

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

<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />

<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />

<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />

Original Post

You could use JQuery Rotate, this would allow you to rotate your PNG image on the page to emulate the loading rotation that you get with a animated GIF.