CSS animated loading indicators • Hacker News Board

Re: CSS animated loading indicators

#41

Post by dlsym » Tue, Dec 17, 2013, 2:28 PM UTC

locusm wrote: post #35

nkuttler wrote: post #23

Here's the browser compatibility info: http://caniuse.com/css-animation

I often forget how late IE was to this party

IE?

(scnr)

Re: CSS animated loading indicators

#42

Post by gizzlon » Tue, Dec 17, 2013, 2:33 PM UTC

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.

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?

Re: CSS animated loading indicators

#43

Post by wreegab » Tue, Dec 17, 2013, 2:37 PM UTC

eik3_de wrote: post #29

hising wrote: post #26

Earlier quoted context omitted.

Any numbers available?

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

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

Re: CSS animated loading indicators

#44

Post by wreegab » Tue, Dec 17, 2013, 2:39 PM UTC

sergiosgc wrote: post #14

nvdk wrote: post #11

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

And easy to rescale, recolor, etc.

Re: CSS animated loading indicators

#45

Post by wmeredith » Tue, Dec 17, 2013, 2:50 PM UTC

gizzlon wrote: post #42

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.

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?

As a designer and client-side dev, I've been using CSS and HTML for about 9 years. A lot of the weird edge cases and nuances are second nature to me now. However, if you step back and look at it all, it's pretty goofy, but then again, so is English. But I'm going to keep using it, because there isn't anything else. At this point, I'm really good at it anyway and this stuff doesn't really bother me too much.

Re: CSS animated loading indicators

#46

Post by proexploit » Tue, Dec 17, 2013, 2:50 PM UTC

gizzlon wrote: post #42

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.

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.

Re: CSS animated loading indicators

#47

Post by moron4hire » Tue, Dec 17, 2013, 2:59 PM UTC

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…

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

Re: CSS animated loading indicators

#48

Post by onto » Tue, Dec 17, 2013, 3:12 PM UTC

moistgorilla wrote: post #21

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

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

Re: CSS animated loading indicators

#49

Post by odc » Tue, Dec 17, 2013, 4:12 PM UTC

Very nice! Although I hope this won't be mainstream too soon as this uses 10% of my CPU (Firefox on Linux).

Re: CSS animated loading indicators

#50

Post by CRowlands » Tue, Dec 17, 2013, 4:46 PM UTC

Here 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) } }