Pure CSS only loading animation

30 August 2011

Inspired by a post on Forrst, showing a simple animation of three dots dancing on a line, which can be used for a loading animation. I took things a bit further and created a more fancy loading animation. See the fancy animation in action! I tested the animation succesfully in Firefox 6 and Chrome 13. JSfiddle didn't run in IE on my computer due to a JS error, but it should degrade gracefully. The animation isn't shown, but it still displays an overlay with a loading message.

Update 31-08: I continued experimenting with the animation options, and I created another effect "shake me". Hover over the loading box in this demo to see it in action!

Update 31-08: I'm on a roll!



The HTML needed for the overlay and the animation:

<html>
<body>
  <p>A really long text or real content. Your page goed here.</p>
  <div id="overlay"></div>
  <div id="dancing-dots-text">
    Loading <span><span>.</span><span>.</span><span>.</span><span>.</span><span>.</span></span>
  </div>
</body>
</html>

And the -slightly longer- CSS declarations:

@-webkit-keyframes dancing-dots-jump {
    0% { top: 0; }
    55% { top: 0;     text-shadow: 0px 0px 0px rgba(0,0,0,0.5); }
    60% { top: -20px; text-shadow: 5px 20px 5px rgba(0,0,0,0.5); }
    80% { top: 4px;   text-shadow: 0px 0px 0px rgba(0,0,0,0.5); }
    90% { top: -3px;  text-shadow: 0px 3px 1px rgba(0,0,0,0.5); }
    95% { top: 1px;   text-shadow: 0px 0px 0px rgba(0,0,0,0.5); }
    100% { top: 0;    text-shadow: 0px 0px 0px rgba(0,0,0,0.5);}
}
@-moz-keyframes dancing-dots-jump {
    0% { top: 0; }
    55% { top: 0;     text-shadow: 0px 0px 0px rgba(0,0,0,0.5); }
    60% { top: -20px; text-shadow: 5px 20px 5px rgba(0,0,0,0.5); }
    80% { top: 4px;   text-shadow: 0px 0px 0px rgba(0,0,0,0.5); }
    90% { top: -3px;  text-shadow: 0px 3px 1px rgba(0,0,0,0.5); }
    95% { top: 1px;   text-shadow: 0px 0px 0px rgba(0,0,0,0.5); }
    100% { top: 0;    text-shadow: 0px 0px 0px rgba(0,0,0,0.5);}
}
html, body {
    height: 100%:
}
body {
    background: #FFFFFF;
    font-family: georgia;
}
p {
    width: 500px;
    margin: 0 auto;  
}
#overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background:url(http://images2.layoutsparks.com/1/153633/pink-black-stripes-diagonal.gif);
    opacity: 0.7;
    filter: alpha(opacity = 70);
}
#dancing-dots-text {
    box-shadow: inset 0px 0px 30px rgba(0,0,0,0.2), 0px 0px 20px rgba(0,0,0,1);
    background: #ff119d;
    border: 8px solid #FFFFFF;
    width: 200px;
    padding: 30px 50px;
    border-radius: 15px;
    text-align: center;
    font-size: 30px;
    font-style: italic;
    margin: 30px auto;
    color: #FFFFFF;
    position: fixed;
    margin-left: -160px;
    left: 50%;
    top: 100px;
}

#dancing-dots-text span {
    font-size: 60px;
    line-height: 10px;
    text-shadow: 0px 0px 0px rgba(0,0,0,0.5);;  
}

#dancing-dots-text span span {
    -webkit-animation-duration: 2500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: dancing-dots-jump;
    -moz-animation-duration: 2500ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: dancing-dots-jump;
    padding: 1px;
    position: relative;
}

#dancing-dots-text span span:nth-child(1) {
    -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms;
}

#dancing-dots-text span span:nth-child(2) {
    -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms;
}

#dancing-dots-text span span:nth-child(3) {
    -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms;
}

#dancing-dots-text span span:nth-child(4) {
    -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms;
}

#dancing-dots-text span span:nth-child(5) {
    -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms;
}
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar

    Tjarko Rikkerink

    31 August 2011

    Looks amazing, nice times are coming for us developers in the "near" future. Thanks for this post.