Just some funzies with CSS3 animations. If you are worried about super deep browser support, use a GIF.
<div class="loader"> <span></span> <span></span> <span></span> </div>.loader { text-align: center; } .loader span { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin: 50px auto; background: black; border-radius: 50px; -webkit-animation: loader 0.9s infinite alternate; -moz-animation: loader 0.9s infinite alternate; } .loader span:nth-of-type(2) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; } .loader span:nth-of-type(3) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; } @-webkit-keyframes loader { 0% { width: 10px; height: 10px; opacity: 0.9; -webkit-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -webkit-transform: translateY(-21px); } } @-moz-keyframes loader { 0% { width: 10px; height: 10px; opacity: 0.9; -moz-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -moz-transform: translateY(-21px); } }
Clean & Simple! Nice one Chris!
Wow.. that’s the coolest thing I have seen today.
I dont get it!
What exactly am i looking at here?
As far as i can tell, its 3 black boxes that do nothing :(
Well, I guess you are using the naughty browser… kick it and use a good/better one.
Pretty neat. Now I just have to find a way to change it up and implement it.
wicked lookin :)
how could i make this multicolored? i tried and coiuldnt seem to able to seperate the squares with id’s or classes :(
Easy – style each span –
Nice one. There is a whole generator of those things on http://cssload.net. Also, it would be nice if there were a preview of the provided animation
Not working in IE9.
Anyway best thing i´ve seen today.
I would use it, if it would be compatible at least with IE9.
Awesome technique ,
Mike : @keyframes tech.—> does not work on IE and its not supported at all …
its really great .
This gave me the idea of making a Microsoft-style dots loader.. :)
http://jsfiddle.net/Krummelz/FKQUG/
Nice one, but not exactly what is given in windows8. It needs to be tweaked a little to be an exact match. But still – awesome…
It does not work on weebly for some reason.
Nice! However, I am worried about deep browser support. How do I incorporate the .gif??
Doh! Nevermind… I already figured it out
It is cool. But it is not working in IE(IE8)….. Check this problem
It’s not a problem, it’s a too old browser :) – IE8 does not support CSS animations
Its best but not for IE.
I want to make this load as page loading effect. How can i do so?
For some reason, my Ubuntu Chrome browser doesn’t support it. I just put it on my website anyway. It is here…
Hi,
nice ! Like it !
You can make the size of the circle configurable, by using “em” units.
Exemple : http://jsfiddle.net/AbrahamTewa/CVW9u/
Hi this is not working in IE…all my client uses IE..in that case how can If this this loader…any help
@Kalpana
For this to work on IE you’ll also have to include the
-ms-prefixthnx so much for this :) was looking for a quick css animation for a loading image…this should do the trick (no pun intended) ;)
Inspired by you, https://codepen.io/anandchakru/pen/VyLMpz
Hi. Very nice!
How can I use this while I’m waiting for an service response ? ( something like .NET Background Worker )