13 ms·
CSS animated loading indicators
- odc 13y agoVery nice! Although I hope this won't be mainstream too soon as this uses 10% of my CPU (Firefox on Linux).
- baby 13y agoIt'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.
- littke 13y agoI would. Certainly prefer CSS stuff compared to GIFs for this kind of stuff.
- imdsm 13y agoI too would use this.
- theoggooch 13y agoI agree, it's really nice but it isn't even working in ie9. A .gif would fit the bill in the cross browser department
- robin_reala 13y agoGIFs don’t do alpha. I’d probably use an SVG though for this.
- e12e 13y agoAnimated PNGs? (Or is IE support still a problem...?)
- robin_reala 13y ago“Everything that’s not Firefox”-support is still a problem: http://caniuse.com/#feat=apng http://caniuse.com/#feat=apng
- johnny_reilly 13y agoWe'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-animation-for-your-users.html http://icanmakethiswork.blogspot.co.uk/2013/04/a-navigation-...
- nness 13y agoCan't beat good progressive enhancement!
- sambeau 13y agoSVG animation can be chanky on a mobile device
- j79 13y agoAs can CSS animations. On a project that targeted tablets (iPads and Androids), we eventually went back to good ol' gifs because of how bad SVG and CSS animations rendered and performed.
- nness 13y agoYou 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).
- pera 13y agoindeed, here is a non-that-fancy loading indicator in SVG: http://rendro.github.io/SVG-Spinner/ http://rendro.github.io/SVG-Spinner/
- onion2k 13y agoThey don't seem to animate in Chrome 31.
- cstuder 13y agoThey do for me in Chrome 31 on Windows 7. Ugly aliasing in Firefox though.
- nness 13y agoWorks for me. Chrome 31, Windows 7.
- paulfurtado 13y agoAlso works for me, Chrome 31, Linux.
- cupofjoakim 13y agoFeels a bit too flashy for me. That's just personal opinion though, it's still great work. Now work on cross browser support.
- nvdk 13y agoI believe all of them actually use more bandwidth then a gif, so why use this exactly?
- nness 13y agoI 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.)
- sergiosgc 13y agoAlpha channel support. Transparency in gifs is boolean, not a linear scale.
- wreegab 13y agoAnd easy to rescale, recolor, etc.
- sambeau 13y agoCSS will normally also get zipped: you are comparing compressed gif to uncompressed css
- brokenparser 13y agoNice work, especially "Wave" and "Circle" because they're more likely to be recognised as such. (Similar animations are already seen in the wild.)
- surjithctly 13y agoI've also created one Windows 8 Loading with pure CSS3 http://codepen.io/surjithctly/details/Kfqak http://codepen.io/surjithctly/details/Kfqak
- moistgorilla 13y agoNice job. Is it a problem with the state of webdev that the thing I was most impressed by was that your website didn't break my back button? Seriously, good work.
- nkuttler 13y agoWell, that's a nice feature, but as you bring it up, deep linking isn't possible ;-) There are various techniques to enable it though, pushState(), hash fragments etc.
- relix 13y agoBest would be a replaceState: would not break back button, would allow deep linking.
- choult 13y agoThe thing I was most impressed by was the fact that the left and right cursor buttons worked straight off the bat :D
- onto 13y agoI believe it is a side-effect of the keyboard navigation. It appears to support the back button (due to the script listening for the arrow keys and disregarding the Alt-modifier) but only for those users who use the keyboard to navigate back-and-forth in history. If you observe carefully, the actual "back button" isn't activated (and hence useless).
- nkuttler 13y agoHere's the browser compatibility info: http://caniuse.com/css-animation http://caniuse.com/css-animation
- eik3_de 13y agoUnfortunately very CPU intense, compared to SVG-based indicators
- hising 13y agoAny numbers available?
- eik3_de 13y agolooks like a problem with my chromium as firefox is almost idle when displaying the indicators. (30.0.1599.114 Developer Build 30.0.1599.114-0ubuntu0.12.04.3 x86_64)
- lucaspiller 13y agoIt works fine on Safari on my iPhone 4.
- wreegab 13y agoI am on 31.0.1650.63-0ubuntu0.13.04.1~20131204.1, and it was ok here. CPU around 3-4% for most of them. One of them was 8%.
- gizzlon 13y agoAre you telling me that CSS can now make nice animated wobbling circles but still can't center in a sane way? (Nice work, btw, like the animations =)
- proexploit 13y agoI find centering in CSS pretty easy currently, what about it is troubling you? This resource (http://timseverien.nl/2013/10/css-alignment-and-sizing/ http://timseverien.nl/2013/10/css-alignment-and-sizing/) showcases a number of techniques.
- moron4hire 13y agoI agree with gizzlon. The inline-block versions are the closest things to actually saying "put this block in the middle". For a system that claims to be all about layout, it shouldn't be so obtuse to say "stick this, whatever this is, in the middle." Also, auto-flowing text split between columns as a "column" property of some kind would be nice. The list you provided is handy, but it shouldn't require knowing that you have to look up specific cases.
- hnriot 13y agoThere's an old phrase that the bad workman blames his tools and it seen to apply here too. It's really not difficult and why complain about it being obtuse? If you understand the fundamentals then it makes sense. As for the last sentence well the list he provided is only for people that need to look it up (like you) - that's like me saying to my car mechanic that I should have to look up where the fuses are in the car. If you don't know something you have to look it up (taking what? .4 seconds on google?) - if you knew it you'd obviously not have to look it up. Stop whining and learn this stuff.
- moron4hire 13y agoThat wasn't really necessary. I'm glad you get to work in UI-world all day long that CSS' idiosyncrasies are something you can memorize inside and out. Personally, I'm required to know a lot more about mathematics and databases. My clients can deal with not-very-pretty UI, they can't deal with lost or incorrect data. But if you want to make analogies about tools, one should always use the right tool for the job and not employ hacks. To me, "margin:auto" is a hack. It doesn't express that the object in question is being put in the middle of something else. It hides the intent of the action behind insider jargon. Or, to continue your analogy, it's using the handle of a screw driver to hammer in a nail.
- Trufa 13y agoThis is pretty neat, also I was incredibly surprised when going through the code to see in how little number of lines he achieved that!
- Vektorweg 13y agoNow we have brand new CSS and we do a subset of the cool things, we could do in SVG since ten years. I'm a bit confused. Oh and it doesn't work in Opera 12 .
- wil421 13y agoDoes anyone have a tutorial that shows how to implement a loading screen?
- sholanozie 13y agoWith Backbone.js: I usually just hide all views except for my "loadingView" (which is usually just a simple HTML element with a spinner/translucent background/etc.) while I'm retrieving data. When my data arrives, I hide the "loadingView" and display the data as usual. There are probably better approaches, but it works for my projects. Hope this helps.
- usrnam 13y agoAnd this is main in favicon: https://github.com/dawjan/Open_Me/tree/master/JQ%20busy%20indicator https://github.com/dawjan/Open_Me/tree/master/JQ%20busy%20in... Sorry no preview
- hk__2 13y ago“Working only in Firefox”
- CRowlands 13y agoHere is a little editing on one of the ones I like this better then the three in a row. .spinner { margin: 100px auto 0; width: 70px; text-align: center; } .spinner > div { width: 22px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0) } 40% { transform: scale(1.0) } }
- petejansson 13y agoThese are really very nice, but they don't really convey any more information than a static picture of a puzzled kitten. Like "security theater," this is "progress theater" and I would prefer to give my users a more useful indication of progress. I do appreciate the work that went into these, and admire the skill.
- jamornh 13y agoI agree that what you prefer would be ideal, however a lot of things that happen on the Web isn't conducive to a real "true current state of progress" loader. Actually, a lot of things that happen even on local machines are not possible to be determined in an absolute sense. That's why most progress bars seem to progress in fits and spurts, not in smooth consistent amount over time... I think this is due to some tasks just take an indeterminate amounts of time. In those cases, a progress bar isn't much better than a numbered list of things shown as "to do" and "done." In the case like client server request response, which may be asynchronous, where responses are only received when it's "done" then it makes sense why these cannot show progress... Just that it's "still waiting." Not ideal, but I can't see a better solution that doesn't require sending multiple updates back saying "still not really sure when we'll get to your request" or "just fetched stuff from the dB, 2 more tasks to do."
- coldtea 13y ago>I would prefer to give my users a more useful indication of progress Those are called "indeterminate progress indicators". Not everything on the web has some specific state info or progress percentage to declare. Just showing that "something is running" is still very useful for those situations, and can have a huge impact on the users perception of the page responsiveness. (As has lots of other "theater", which is not to be dismissed -- e.g the mobile practice of showing a screenshots of the apps last state while you load it, making the user thing it loaded faster).
- im3w1l 13y agoThe animation tears, and it needs antialiasing.