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

Ryan's answer is great. I will recommend you to take a look on CSS3 loading animations. Yes, this works only for modern browsers, but that is future :) — Miljan Puzović, Mar 27 '13 at 12:16
Don't use APGN, that's not standard PNG and its supported is limited. There is no standard animated PNG. Either use animated GIF, or pseudo-animate a set of PNG "frames" with Javascript. — leonbloy, Mar 27 '13 at 14:49

Ryan McDonough · Accepted Answer · 2022-04-05T09:22:01.567

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.

Make a loading icon with static PNG

1 Answers1