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

CSS animated loading indicators

tobiasahlin.com

Post reply on HN
Print view View original

51–60 of 71 posts

Re: CSS animated loading indicators

#51

Post by riffraff »

proexploit wrote: post #46
gizzlon wrote: post #42

Earlier quoted context omitted.

This resource .. showcases a number of techniques. That's kind of the point.. you should not need to have a page to showcase different techniques for something this basic. I, for one, does not have to deal with this. But as and outsider it seems strange that simple things are so hard. Maybe web developers have gotten so used to dealing with things like this that they don't see how convoluted it is?

I see what you're saying and I agree it would be great to be simpler. My perspective is that the complexity is actually in the flexibility in CSS and the number of options provided to you. I'm not sure how I'd make it simpler without removing some of the control.

honest question, but what would the problem be with having "margin: auto" work vertically as it does horizontally?

EDIT: I mean, what freedom would have been lost when it was designed to work like this, not talking of changing it now.

Re: CSS animated loading indicators

#53

Post by User1398 »

moron4hire wrote: post #36
proexploit wrote: post #33

Earlier quoted context omitted.

I find centering in CSS pretty easy currently, what about it is troubling you? This resource ( http://timseverien.nl/2013/10/css-alignment-and-sizing/ ) showcases a number of techniques.

I 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 yo…

Split text between columns...

http://jsfiddle.net/BZuu9/

Re: CSS animated loading indicators

#54

Post by petejansson »

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

Re: CSS animated loading indicators

#56

Post by jamornh »

petejansson wrote: post #54

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

I 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."

Re: CSS animated loading indicators

#57

Post by moron4hire »

User1398 wrote: post #53
moron4hire wrote: post #36

Earlier quoted context omitted.

I 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 yo…

Split text between columns... http://jsfiddle.net/BZuu9/

thanks, that is much appreciated.

Re: CSS animated loading indicators

#58

Post by sholanozie »

wil421 wrote: post #37

Does anyone have a tutorial that shows how to implement a loading screen?

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

Re: CSS animated loading indicators

#59

Post by j79 »

sambeau wrote: post #19
baby wrote: post #2

It'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

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

Re: CSS animated loading indicators

#60

Post by coldtea »

proexploit wrote: post #33
gizzlon wrote: post #28

Are 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 =)

I find centering in CSS pretty easy currently, what about it is troubling you? This resource ( http://timseverien.nl/2013/10/css-alignment-and-sizing/ ) showcases a number of techniques.

>pretty easy currently

The use "currently" itself should set of a number of alarms in a sane person.

Then, to top it, you add: "showcases a number of techniques".

Centering should be an built-in, simple, capability. As simple as making some div red or adding a 2px border.

Not a "technique" or a "workaround" and surely not "many of them" (incompatible and each with different tradebacks).

You don't see "techniques" for making divs have a certain background color -- that's because there's a single instruction for that, and it bloody works all the time.

Post reply on HN