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

61–70 of 71 posts

Re: CSS animated loading indicators

#61

Post by coldtea »

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.

>My perspective is that the complexity is actually in the flexibility in CSS and the number of options provided to you

Not really, most of the complexity is of the ill-thought design they started with, and the LACK of options for certain things.

Initially the envisioned CSS as a styling technology, so layout was an afterthought. Even the messy floats hacks (those one that replaced tables) wasn't something that was though of specifically as a complete layout solution.

We had to wait 10+ years, to have actual layout solutions catering to the needs of web designers: Flexbox, Regions, Multi-Column layout and Grid Layout -- and of course those are still not implemented totally by browser vendors, give a few years wait for that too.

Re: CSS animated loading indicators

#62

Post by coldtea »

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

Re: CSS animated loading indicators

#63

Post by coldtea »

hnriot wrote: post #39
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…

There'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 ca…

>There's an old phrase that the bad workman blames his tools and it seen to apply here too.

Not all of us are "workmen" here, that have to get used to our tools, etc.

Some of us are actual scientists and engineers, with lots of experience in identifying broken APIs and tools. Some of us even PROGRAM the tools you get to use, from CSS implementations in browsers to editors and such. Heck, there are people on HN from Mozilla, Google, Apple and MS.

CSS, with regards to layout, has been broken from the start.

That's not up for debate just because someone has mastered all the intricasies. Even the original authors and the W3C agree and have taking corrective steps in later CSS versions (still not widely supported).

So "Stop whining and learn this stuff" is not really an answer in a technical debate.

Re: CSS animated loading indicators

#64

Post by e12e »

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/

[edit: I appreciate the constructive example, should've mentioned that.]

Which unfortunately looks like crap, as there is no (standard) way to get browsers to hyphenate words in a sane way :-(

[edit: I wish CSS Regions was (or was likely to become) a viable solution, as it actually does what a lot of people want: a sane and standard way to lay out text, based on experiences from dtp. Sadly, afaik, it's unlikely to be accepted, and I'm not sure if there's even a decent way to get it to work with a polyfill (suitable for production):

http://dev.w3.org/csswg/css-regions/Overview.src.html

https://github.com/adobe-webplatform/css-regions-polyfill

In theory css-regions along with hyphenator or hypher should be enough to have layouts that are both semantic, look good, and are simple to implement. It's been a while since I tried to get it to actually work, and I don't remember it as "just working" (that would include proper pagination both on small screens and on print outs, without too much effort):

http://code.google.com/p/hyphenator/

https://github.com/bramstein/hypher

]

Re: CSS animated loading indicators

#65

Post by e12e »

robin_reala wrote: post #9
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.

GIFs don’t do alpha. I’d probably use an SVG though for this.

Animated PNGs? (Or is IE support still a problem...?)

Re: CSS animated loading indicators

#66

Post by e12e »

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…

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

Ah, but unfortunately CSS isn't about layout at all. Hence proposals like css-regions (see comment below) -- which are about layout. It's a common mistake: We came to html (with our designer hats on), and thought: Oh, we can layout text with tables! We were wrong, and we got css -- and we thought: Oh, we can layout text with CSS -- but we were still wrong. We could do some minor (and as it turned out pretty major) styling with CSS -- but it was never really meant for layout. We do need a system for layout, and perhaps the most sane thing to do these days is to wrap CSS into a tool that does styling and layout. But CSS of today isn't quite there.

See: http://www.w3.org/TR/WD-css1-951117.html#abstract

"This document specifies level 1 of the Cascading Style Sheet machanism (CSS1). CSS1 is a simple style sheet language that allows authors and readers to influence the presentation of HTML documents. E.g., a publisher can suggest font families, colors and layout for a document, while the reader can ask for the document to be magnified. By attaching style to HTML elements, document structure and device-independence is preserved."

Over-eager use of emphasis mine. While it contains the word layout, it's set in the context of HTML documents -- and I think that was a mistake. Still it brought us forward from what things was like before the mid 90s!

Re: CSS animated loading indicators

#67

Post by proexploit »

coldtea wrote: post #61
proexploit wrote: post #46

Earlier quoted context omitted.

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.

> My perspective is that the complexity is actually in the flexibility in CSS and the number of options provided to you Not really, most of the complexity is of the ill-thought design they started with, and the LACK of options for certain things. Initially the envisioned CSS as a styling technology, so layout was an afterthought. Even the messy floats hacks (those one that replaced tables) wasn't something that was t…

That's fair. Perhaps I'm too comfortable with the concepts I've been forced to learn thus far.

Re: CSS animated loading indicators

#68

Post by proexploit »

coldtea wrote: post #60
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.

> 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" fo…

I find centering more complex because there's not just one type of centering. I think centering can differ based on fixed and fluid width, display type of element (inline, inline-block, block), and probably other factors. I can't think of a clear definition for how a single simple centering would work given all the possible variables at this point.

Re: CSS animated loading indicators

#69

Post by robin_reala »

e12e wrote: post #65
robin_reala wrote: post #9

Earlier quoted context omitted.

GIFs don’t do alpha. I’d probably use an SVG though for this.

Animated PNGs? (Or is IE support still a problem...?)

“Everything that’s not Firefox”-support is still a problem: http://caniuse.com/#feat=apng
Post reply on HN