Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Performance-focused pure CSS loading animations

connoratherton.com

Post reply on HN
Print view View original

11–16 of 16 posts

Re: Show HN: Performance-focused pure CSS loading animations

#11

Post by laumars »

exogen wrote: post #10
laumars wrote: post #9

Earlier quoted context omitted.

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 browse…

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).

Ahh my apologies then :)

Re: Show HN: Performance-focused pure CSS loading animations

#13

Post by oxplot »

exogen wrote: post #8
Vektorweg wrote: post #6

Earlier quoted context omitted.

And why not SVG?

I'm not sure, because I haven't tried it, but: assume the markup and scripts are locked down, and you're only offered CSS as a means to theme a site's look & feel – how then would the SVG markup get on the page? Such was the case for our customers' sites at the company where I made this: everyone got the same markup in their widget, and changing that (for example, to add some SVG elements) was a more involved release…

Not 100% sure, but if you inline an SVG in HTML, you should be able to style it using CSS the usual way.

Re: Show HN: Performance-focused pure CSS loading animations

#14

Post by exogen »

oxplot wrote: post #13
exogen wrote: post #8

Earlier quoted context omitted.

I'm not sure, because I haven't tried it, but: assume the markup and scripts are locked down, and you're only offered CSS as a means to theme a site's look & feel – how then would the SVG markup get on the page? Such was the case for our customers' sites at the company where I made this: everyone got the same markup in their widget, and changing that (for example, to add some SVG elements) was a more involved release…

Not 100% sure, but if you inline an SVG in HTML, you should be able to style it using CSS the usual way.

True, that is my understanding as well – still, though, requires that you have that SVG in your HTML in the first place. The CSS approach (in my link anyway, not necessarily OP's) can be incorporated without any updates to your existing markup – even without adding a single DIV.

Re: Show HN: Performance-focused pure CSS loading animations

#15

Post by 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.

Post reply on HN