Published
Updated
Easily manage projects with monday.com
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);
}
}
All comments are held for moderation. We'll publish all comments that are on topic, not rude, and adhere to our Code of Conduct. You'll even get little stars if you do an extra good job.
You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.
Want to tell us something privately, like pointing out a typo or stuff like that? Contact Us.
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 )