Bouncy Animated Loading Animation
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) ;)