Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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

Reference URL

Comments

  1. Julien Vernet
    Permalink to comment#

    Clean & Simple! Nice one Chris!

  2. Alex
    Permalink to comment#

    Wow.. that’s the coolest thing I have seen today.

  3. Rett
    Permalink to comment#

    I dont get it!
    What exactly am i looking at here?
    As far as i can tell, its 3 black boxes that do nothing :(

    • jbcarey
      Permalink to comment#

      Well, I guess you are using the naughty browser… kick it and use a good/better one.

  4. Mike
    Permalink to comment#

    Pretty neat. Now I just have to find a way to change it up and implement it.

  5. Duje
    Permalink to comment#

    wicked lookin :)

  6. Rich
    Permalink to comment#

    how could i make this multicolored? i tried and coiuldnt seem to able to seperate the squares with id’s or classes :(

  7. Ajax Loaders
    Permalink to comment#

    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

  8. Mike
    Permalink to comment#

    Not working in IE9.

    Anyway best thing i´ve seen today.
    I would use it, if it would be compatible at least with IE9.

  9. Omar Zeidan
    Permalink to comment#

    Awesome technique ,

    Mike : @keyframes tech.—> does not work on IE and its not supported at all …

    its really great .

  10. Jacques
    Permalink to comment#

    This gave me the idea of making a Microsoft-style dots loader.. :)
    http://jsfiddle.net/Krummelz/FKQUG/

    • CSS loading animations
      Permalink to comment#

      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…

    • Tanmay Kant

      It does not work on weebly for some reason.

  11. Chris
    Permalink to comment#

    Nice! However, I am worried about deep browser support. How do I incorporate the .gif??

  12. Arup Panda
    Permalink to comment#

    It is cool. But it is not working in IE(IE8)….. Check this problem

    • CSS loading animations
      Permalink to comment#

      It’s not a problem, it’s a too old browser :) – IE8 does not support CSS animations

  13. Kamran
    Permalink to comment#

    Its best but not for IE.

  14. namit111
    Permalink to comment#

    I want to make this load as page loading effect. How can i do so?

  15. Tanmay Kant

    For some reason, my Ubuntu Chrome browser doesn’t support it. I just put it on my website anyway. It is here…

  16. Abraham Tewa

    Hi,

    nice ! Like it !

    You can make the size of the circle configurable, by using “em” units.
    Exemple : http://jsfiddle.net/AbrahamTewa/CVW9u/

  17. Kalpana
    Permalink to comment#

    Hi this is not working in IE…all my client uses IE..in that case how can If this this loader…any help

    • bitNate
      Permalink to comment#

      @Kalpana
      For this to work on IE you’ll also have to include the -ms- prefix

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```