I believe all of them actually use more bandwidth then a gif, so why use this exactly?
CSS animated loading indicators
11–20 of 71 posts
Re: CSS animated loading indicators
#12Nice work, especially "Wave" and "Circle" because they're more likely to be recognised as such. (Similar animations are already seen in the wild.)
Re: CSS animated loading indicators
#13I believe all of them actually use more bandwidth then a gif, so why use this exactly?
I think you're mistaken. The first example is only ~700 bytes in size. Show me an animated GIF, with those dimensions, that many frames (to maintain that level of smoothness), for under 700 bytes?
(HTTP overheads are not factored since HTML + CSS is one less request than HTML + CSS + Image resource.)
Re: CSS animated loading indicators
#14I believe all of them actually use more bandwidth then a gif, so why use this exactly?
Alpha channel support. Transparency in gifs is boolean, not a linear scale.
Re: CSS animated loading indicators
#15They don't seem to animate in Chrome 31.
Works for me. Chrome 31, Windows 7.
Re: CSS animated loading indicators
#16I believe all of them actually use more bandwidth then a gif, so why use this exactly?
CSS will normally also get zipped: you are comparing compressed gif to uncompressed css
Re: CSS animated loading indicators
#17I've also created one
Windows 8 Loading with pure CSS3
Re: CSS animated loading indicators
#18It's nice and well done, but now who would use this novelty idea in a real work? There are animated GIF or fonts SVG for that.
We're using something similar to this in our current project. We have a fallback to a classic animated gif if animations aren't supported. I'd guess we're not the only people doing this. Wrote it up here: http://icanmakethiswork.blogspot.co.uk/2013/04/a-navigation-...
Can't beat good progressive enhancement!
Re: CSS animated loading indicators
#19It's nice and well done, but now who would use this novelty idea in a real work? There are animated GIF or fonts SVG for that.
SVG animation can be chanky on a mobile device
Re: CSS animated loading indicators
#20It's nice and well done, but now who would use this novelty idea in a real work? There are animated GIF or fonts SVG for that.
You might have more luck getting this to work than animating SVG files; which doesn't work in any IE version, and has issues in Safari and iOS Safari, and old versions of Android (Pre 3.0, but damn, they are everywhere).