Wave Loader

by Marc Malignan

HTML

<div id="loader">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>
<footer>Based on a <a href="https://dribbble.com/shots/881970-Loader-02-WIP-Animation">Dribble</a> by Marcel</footer>

CSS

@-webkit-keyframes jump {
    0% { width:20px; height: 180px; margin-left:0; margin-top:0; 
        box-shadow: 
            inset 0 1px 1px rgba(255,255,255,.2),
            0 2px 2px rgba(0,0,0,.7); }
    50% { width:26px; height: 186px; margin-left:-3px; margin-top:-3px; 
        box-shadow: 
            inset 0 1px 1px rgba(255,255,255,.2),
            0 20px 25px rgba(0,0,0,.7); }
    100% { width:20px; height: 180px; margin-left:0; margin-top:0; 
        box-shadow: 
            inset 0 1px 1px rgba(255,255,255,.2),
            0 2px 2px rgba(0,0,0,.7); }
}

html {
    height: 100%;
}

body {
    margin: 0;
    text-align: center;
    background: radial-gradient(#888, #444 80%);
}

#loader {
    position: absolute;
    left:50%; top:50%;
    width:300px; height:180px;
    margin-left:-150px; margin-top:-90px;
}

.bar {
    position: absolute;
    -webkit-animation: jump 1s ease infinite;
    border-radius: 2px;
}
.bar:nth-child(1) { left: 0; }
.bar:nth-child(2) { left: 40px; -webkit-animation-delay: .1s; }
.bar:nth-child(3) { left: 80px; -webkit-animation-delay: .2s; }
.bar:nth-child(4) { left: 120px; -webkit-animation-delay: .3s; }
.bar:nth-child(5) { left: 160px; -webkit-animation-delay: .4s; }
.bar:nth-child(6) { left: 200px; -webkit-animation-delay: .5s; }
.bar:nth-child(7) { left: 240px; -webkit-animation-delay: .6s; }
.bar:nth-child(8) { left: 280px; -webkit-animation-delay: .7s; }

footer {
    position: absolute;
    right:0; bottom:0; left:0;
    line-height: 40px;
    color: #333;
    font-family: calibri;
}
footer a {
    color: #888;
}