

Show HN: Performance-focused pure CSS loading animations - connoratherton
http://connoratherton.com/loaders

======
j4_james
As others have mentioned, most of these don't work on Firefox. For the few
that I looked at, the only problem seemed to be a missing unit identifier on
the animation delay. For a zero _length_ the unit is optional, but not for a
time type - at least by my reading of the specs. It may work in blink/webkit,
but I don't think it's technically valid.

Edit: Have since looked at a few more of the broken ones, and found another
problem source being your use of quoted strings for the animation name in some
places. That too is not valid according to the specs - they should be unquoted
identifiers.

------
syntheticcdo
These are pretty, however the demo page causes my Firefox to spin up to over
100% CPU utilization (obviously with hardware rending enabled). Why not just
use a gif?

~~~
exogen
I've made this before [1], here are at least a few reasons:

\- smoother than GIFs

\- GIFs don't have full alpha transparency

\- much easier to customize and adapt to different themes/sites/etc.

[1] [http://brianbeck.com/spinner/](http://brianbeck.com/spinner/)

~~~
laumars
I think you could make similar arguments against the use of CSS. eg:

\- plays nicer on lower end hardware (I actually don't buy that CSS is
smoother than GIF. I think it's 50/50 depending on how the GIF was designed
(eg # frames, delay between frames, frame overlay method, etc), the hardware
the GIF / CSS is rendered on, the browser running the CSS, etc.

\- GIF works uniformly on all platforms (bar console-based browsers obviously
hehe)

\- and to expand on your second point, it doesn't seem like you're using alpha
transparency on half your examples anyway.

Anyhow, it wasn't my intention to be negative. There's some stylish work there
and it shows you've gone to a lot of effort. I particularly like the Pac-Man
example. Unfortunately though (and to reiterate an early point) sadly quite a
few examples failed to animate. Below is my full user agent string, and a map
of the examples that worked and failed, in case it helps you with future
developments:

    
    
        Mozilla/5.0 (X11; Linux x86_64; rv:36.0) Gecko/20100101 Firefox/36.0
    
        A A X X
        X X A X
        X X X X
        X A A
        A X X X
        X X A A
        X A A
    
        A == Animated
        X == not animated
          == empty spot (failed animation?)

~~~
exogen
Unfortunately I'm not the OP. I only designed the unrelated demo in my comment
(which does use alpha transparency btw to blend in with whatever background
color/image one might use).

~~~
laumars
Ahh my apologies then :)

------
deepuj
This is really nice, but wouldn't it be much more performance focused to
simply use a gif?

------
sago
Very nice.

A pair of red cherries if you can make pac-man chomp though!

------
emranemran
This is awesome. Animations like these would work really well on embedded
platforms like Arduino/RaspberryPi/etc.

------
thomasfoster96
Oh wow - Pacman is pretty cool.

------
fredkelly
Great stuff Connor!

