
CSS animated loading indicators - hising
http://tobiasahlin.com/spinkit/
======
gizzlon
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 =)

~~~
proexploit
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/](http://timseverien.nl/2013/10/css-alignment-and-sizing/)) showcases a
number of techniques.

~~~
moron4hire
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 you have
to look up specific cases.

~~~
User1398
Split text between columns...

[http://jsfiddle.net/BZuu9/](http://jsfiddle.net/BZuu9/)

~~~
e12e
[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](http://dev.w3.org/csswg/css-
regions/Overview.src.html)

[https://github.com/adobe-webplatform/css-regions-
polyfill](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/](http://code.google.com/p/hyphenator/)

[https://github.com/bramstein/hypher](https://github.com/bramstein/hypher)

]

------
nkuttler
Here's the browser compatibility info: [http://caniuse.com/css-
animation](http://caniuse.com/css-animation)

~~~
locusm
I often forget how late IE was to this party

~~~
dlsym
IE?

(scnr)

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

~~~
nkuttler
Well, 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
Best would be a replaceState: would not break back button, would allow deep
linking.

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

~~~
coldtea
> _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).

------
surjithctly
I've also created one

Windows 8 Loading with pure CSS3

[http://codepen.io/surjithctly/details/Kfqak](http://codepen.io/surjithctly/details/Kfqak)

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

------
eik3_de
Unfortunately very CPU intense, compared to SVG-based indicators

~~~
hising
Any numbers available?

~~~
eik3_de
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)

~~~
wreegab
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%.

------
brokenparser
Nice work, especially "Wave" and "Circle" because they're more likely to be
recognised as such. (Similar animations are already seen in the wild.)

------
Vektorweg
Now 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 .

------
cupofjoakim
Feels a bit too flashy for me. That's just personal opinion though, it's still
great work. Now work on cross browser support.

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

------
nvdk
I believe all of them actually use more bandwidth then a gif, so why use this
exactly?

~~~
sergiosgc
Alpha channel support. Transparency in gifs is boolean, not a linear scale.

~~~
wreegab
And easy to rescale, recolor, etc.

------
usrnam
And this is main in favicon:

[https://github.com/dawjan/Open_Me/tree/master/JQ%20busy%20in...](https://github.com/dawjan/Open_Me/tree/master/JQ%20busy%20indicator)

Sorry no preview

~~~
hk__2
“Working only in Firefox”

------
Trufa
This is pretty neat, also I was incredibly surprised when going through the
code to see in how little number of lines he achieved that!

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

~~~
johnny_reilly
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-...](http://icanmakethiswork.blogspot.co.uk/2013/04/a-navigation-
animation-for-your-users.html)

~~~
nness
Can't beat good progressive enhancement!

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

~~~
sholanozie
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.

------
im3w1l
The animation tears, and it needs antialiasing.

------
onion2k
They don't seem to animate in Chrome 31.

~~~
cstuder
They do for me in Chrome 31 on Windows 7.

Ugly aliasing in Firefox though.

